写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等.[vuejs深入二]vue源码解析之一,基础源码结构和htmlParse解析器 今天博主就来详细的实现一个拥有核心功能的htmlParse函数,看看它内部的实现逻辑,了解它是怎么样去解析一个vue模板的. 小目标…

写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内部的实现机制值得让我们深究,比如obServer的实现原理,为什么vue能够实现组件化等等,我们需要理解它内部的运行机制,代码结构,这样才能更深入的理解vue的优秀之处,能更好的贴合业务实际写出更恰当的代码. 说明: 在展开本章之前,博主需要对自己看的源码文件进行一个简短的说明: 博主最终选择首先阅…

Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的是通过Object.defineProperty设置setter和getter,用来实现响应式和依赖收集. 初始化之后,调用 $mount 挂载组件. 启动编译器compile(),对template进行扫描,parse.optimize.generate,在这个阶段会生成渲染函数或更新函数,ren…

系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢? 其实,我们可以把数据理解为状态,而视图就是用户可直观看到页面.页面不可能是一成不变的,它应该是动态变化的,而它的变化也应该是有迹可寻的,或者是由用户操作引起的,亦或者是由后端数据变化引起的,当状态发生改变时,页面也就应该随之而变化,所以我们就可以得到如下一个公式: U…

本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的data,通过Object.defineProperty()将其所有属性设置为访问器属性 对每个属性添加Observer,并在observer中添加订阅者对象序列Dep 添加订阅者对象Watcher,每次初始化的时候添加到对应data属性中的Dep之中 所有,我们从代码的角度将整体分为三个部分:监听数据变…

Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作用. 那么,我们就先来看看nextTick是什么. nextTick功能 看看官方文档的描述: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 再看看官方示例: // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.…

Mybatis源码解析(二) -- 加载 Configuration    正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config.xml 以及 mapper.xml 中的所有信息 都可以在 Configuration 对象中获取到.所以一般情况下,Configuration 对象只会存在一个.通过上篇文章我们知道了mybatis-config.xml 和 mapper.xml 分别是通过 XMLConfigBuilder 和…

Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-with-compiler.js & src/platforms/web/runtime/index.js 等文件中都有对Vue.prototype.$mount的定义: // vue/platforms/web/entry-runtime-with-compiler.js Vue.prototype.…

title: RxJava2源码解析(二) categories: 源码解析 tags: 源码解析 rxJava2 前言 本篇主要解析RxJava的线程切换的原理实现 subscribeOn 首先, 我们先看下subscribeOn()方法, 老样子, 先上Demo Observable<Integer> observable = Observable .create(new ObservableOnSubscribe<Integer>() { @Override public v…

写在前面 本文继续来分析Sentinel的源码,上篇文章对Sentinel的调用过程做了深入分析,主要涉及到了两个概念:插槽链和Node节点.那么接下来我们就根据插槽链的调用关系来依次分析每个插槽(slot)的源码. 默认插槽链的调用顺序,以及每种类型Node节点的关系都在上面文章开头分析过 Sentinel源码解析一 NodeSelectorSlot /** * 相同的资源但是Context不同,分别新建 DefaultNode,并以ContextName为key */ private vol…