terribleness / vue-read

Vue.js源码阅读(2.4.4版本)共五章。从运行时、编译时、双向数据绑定、虚拟节点、异步队列等方面解读原理。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue.js 2.4.4版本,源码解读

提纲分为这五章:

1、Vue构造函数:实例方法和静态方法

2、Vue的响应原理:Observe、Watcher、Dep关系

3、Vue的编译过程:template、AST、Render过程

4、Vue的虚拟节点:VNode、patch算法

5、Vue的异步队列:nextTick调度




一、Vue构造函数:实例方法和静态方法

Vue运行时---第一步扩展实例方法(点击链接)

总结Vue扩展实例方法流程为:

1、 定义function Vue()

2、 initMixin扩展vm._init

3、 stateMixin扩展vm.$data、vm.$props、vm.$set、vm.$delete、vm.$watch

4、 eventsMixin扩展vm.$on、vm.$once、vm.$off、vm.$emit

5、 lifecycleMixin扩展vm._update、wm.$forceUpdate、vm.$destroy

6、 renderMixin扩展vm.$nextTick、vm._render和一些工具方法

Vue运行时---第二步扩展静态方法(点击链接)

总结Vue扩展静态方法流程为:

1、扩展了工具方法Vue.util.warn、Vue.util.extend、Vue.util.mergeOptions、Vue.util.defineReactive

2、扩展了Vue.set 、Vue.delete、Vue.nextTick

3、扩展了Vue.options.conponents、Vue.options.directives、Vue.options.filters

4、扩展了Vue.options._base 等于 Vue构造函数本身

5、扩展了Vue.options.components为默认{name、abstract、props、created、destroyed、watch、render}对象

6、initUse(Vue)扩展了Vue.use

7、initMixin(Vue)扩展了Vue.mixin

8、initExtend(Vue)扩展了Vue.cid属性和Vue.extentd方法

9、initAssetsRegisters(Vue)扩展了Vue.componet、Vue.directive、Vue.filter三个方法

10、‘core/index’中扩展了Vue.$isServer和Vue.$ssrContext的get方法

11、‘runtime/index中扩展了’Vue.config的配置方法mustUseProp、isReservedTag、isReservedAttr、getTagnamespace、isUnknownElement

12、‘runtime/index’中使用了平台相关的指令和组件覆盖之前生成的Vue.options.directives和Vue.options.components

13、‘runtime/index’中增加实例方法vm.patch

14、‘runtime/index’中扩展了实例方法vm.$mounted




二、Vue的响应原理:Observe、Watcher、Dep关系

Vue的响应原理:Observe、Watcher、Dep关系(点击链接)

1、 每个data中属性元素会有一个闭包Dep的实例,里面存放Watcher实例

2、 当template编译为render函数时,会调用属性的get方法,将每一次调用都生成一个watcher实例,并压入dep中,产生订阅效果。

3、 当设置data中属性值的时候,调用属性的set方法通知所有订阅该属性的元素更新

4、 而且props,computed,watch内同理是增加watcher产生订阅和发布的效果。




三、Vue的编译过程:template、AST、Render过程

Vue的编译过程:template、AST、Render过程(点击链接)

1、 template先判断是否存在render函数,如果不存在则判断template模板,最后判断el标签。

2、 const ast = parse(template.trim(),options)是生成抽象语法树。

3、 optimize(ast,options)优化AST树。

4、 const code = generate(ast, options)这一句之后,生成render函数。




四、Vue的虚拟节点:VNode、patch算法

①Vue的虚拟节点Vnode过程(点击链接)

清晰描述了“tempalte”转化为“ast抽象语法树”转化为“render函数”转化为“vnode虚拟树”的过程。

About

Vue.js源码阅读(2.4.4版本)共五章。从运行时、编译时、双向数据绑定、虚拟节点、异步队列等方面解读原理。


Languages

Language:JavaScript 99.7%Language:HTML 0.3%