Vue 进阶 （一）

Vue进阶系列 参考至 VueDemo

Vue 运行机制全局概览

内部流程图：

1、初始化和挂载

1- 初始化

new Vue()以后会调用 init初始化函数。它会初始化生命周期、时间、methods、data、computed、watch等。

• Vue的数据响应。

是经过Object.defineProperty设置 getter 和 setter函数，来实现【响应式】和【依赖收集】。

2- 挂载

初始化后调用$mount 会挂载组件，随后通过编译，经过render function 。若是是运行时编译，那么就不须要render function。

可是若是时存在template的状况， 就是须要进行【编译】步骤了。

2、编译

编译分为三个阶段，parse optimize generate.最终须要获得 render function。

• parse 【解析器】

parse 会用正则等方式解析 template 模板中的指令、class、style等数据，造成AST。

• optimize 【优化器】

optimize 的主要做用是标记 static 静态节点，这是 Vue 在编译过程当中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减小了比较的过程，优化了 patch 的性能。

• generate 【代码生成器】

generate 是将AST转换为render function 字符串的过程。获得结果的是render function 的字符串，以及 staticRenderFns 字符串。

通过编译的三个阶段后，组件中就会出现渲染VNode 的 render function

3、响应式

这里的 getter 跟 setter 已经在以前介绍过了，在 init 的时候经过 Object.defineProperty 进行了绑定，它使得当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter 函数。

当渲染的时候，须要所需的值，所以会经过getter来进行【依赖搜集】。

将数据的观察者对象 Watcher对象存放在Dep中，这样当数据发生变化的时候，就会出发setter. setter 通知以前的【依赖搜集】获得的Dep中的watcher对象，若是须要从新渲染试图，watcher 就会调用update来更新DOM。固然中间还有patch过程。

4、Virtual DOM 虚拟DOM

咱们知道render function会转换成虚拟DOM节点。Virtual DOM 实际上是一颗以javascript对象做为基础的树。
实际上就是对真实DOM树的一个抽象表示。最终虚拟DOM会经过一系列的操做获得真实的DOM。

因为 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，因此使它具备了跨平台的能力，好比说浏览器平台、Weex、Node 等。

{
    tag: 'div',
    children: [
        {
            tag: 'a',
            text: 'love me'
        }
    ]
}

// 渲染为

<div>
    <a>love me</a>
</div>

实际上节点有许许多多的属性，好比isStatic表明是否为静态节点。 isComment 表明是否注释节点。

5、更新渲染

会经过 setter -> Watcher -> update 的流程来修改对应的视图，那么最终是如何更新视图的呢？

当数据变化后，执行 render function 就能够获得一个新的 VNode 节点，咱们若是想要获得新的视图，最简单粗暴的方法就是直接解析这个新的 VNode 节点，而后用 innerHTML 直接所有渲染到真实 DOM 中。可是其实咱们只对其中的一小块内容进行了修改，这样作彷佛有些「浪费」。

这就要说到patch 了。咱们会将新的 VNode 与旧的 VNode 一块儿传入 patch 进行比较，通过 diff 算法得出它们的「差别」。最后咱们只须要将这些「差别」的对应 DOM 进行修改便可。

---

再看全局

接下来咱们继续深刻学习吧，加油~~