Vue.js运行机制全局概览浅读

前一段时间看了一下笔者写的这个，写的还是很好地，记录一下。

1.总体流程

 

初始化及挂载 

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周
期、事件、 props、 methods、 data、 computed 与 watch 等。其中重要的是通过
Object.defineProperty 设置 setter 与 getter 函数，用来实现「 响应式」以及「 依赖收集」。

初始化之后调用 $mount 会挂载组件，如果是运行时编译，即不存在 render function 但是存在
template 的情况，需要进行「 编译」步骤。

编译 

compile编译可以分成 parse、 optimize 与 generate 三个阶段，终需要得到 render function。 

parse：用正则解析template模板中的指令、class、style等数据，形成AST（抽象语法树）。

optimize ：用来标记静态节点，将来更新视图的时候，通过diff算法会跳过静态节点，达到优化的一个目的。

generate：将AST转化成render function字符串，得到结果是 render 的字符串以及 staticRenderFns 字符串。

响应式

当 render function 被渲染的时候，因为会读取所需对象的值，所以会触发 getter 函数进行「 依赖收
集」，「 依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。

形成如下所示的这样一个关系。

 

在修改对象的值的时候，会触发对应的 setter， setter 通知之前「 依赖收集」得到的 Dep 中的每一个
Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来
更新视图。

Virtual DOM

Virtual DOM 其实就是一棵以 Javascript 对
象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。

更新视图 

patch()方法对比新VNode和旧VNode，通过diff算法得到差异，进行对应修改。