new Vue到底发生了什么（2.0）

Vue 实例

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})
复制代码

一个 Vue 应用由一个经过 new Vue 建立的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。当一个 Vue 实例被建立时，它将 data 对象中的全部的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。

初始化及挂载

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

初始化以后调用 $mount 会挂载组件，若是是运行时编译，即不存在 render function 可是存在 template 的状况，须要进行「编译」步骤。

mount挂载 vue也可使用render函数，render函数的参数是createElement(h),createElement有三个参数，分别是标签、attrs属性对象、内容数组，这样写反人性，全部平常仍是使用template。

编译

compile编译能够分红 parse、optimize 与 generate 三个阶段，最终须要获得 render function。

• parse 会用正则等方式解析 template 模板中的指令、class、style等数据，造成抽象语法树AST（动态生成语法树）
• optimize 的主要做用是标记 static 静态节点，这是 Vue 在编译过程当中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减小了比较的过程，优化了 patch 的性能。
• generate 是将 AST 转化成 render function 字符串的过程，获得结果是 render 的字符串以及 staticRenderFns 字符串。

在经历过 parse、optimize 与 generate 这三个阶段之后，组件中就会存在渲染 VNode 所需的 render function 了

响应式

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

当 render function 被渲染的时候，由于会读取所需对象的值，因此会触发 getter 函数进行「依赖收集」，「依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。造成以下所示的这样一个关系。

在修改对象的值的时候，会触发对应的 setter， setter 通知以前 「依赖收集」 获得的 Dep 中的每个 Watcher，告诉它们本身的值改变了，须要从新渲染视图。这时候这些 Watcher 就会开始调用 update 来更新视图，固然这中间还有一个 patch 的过程以及使用队列来异步更新的策略

Virtual DOM

render function 会被转化成 VNode 节点。Virtual DOM 其实就是一棵以 JavaScript 对象（ VNode 节点）做为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终能够经过一系列操做使这棵树映射到真实环境上。因为 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，因此使它具备了跨平台的能力，好比说浏览器平台、Weex、Node 等。

{
    tag: 'div',                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
        {
            tag: 'a',           /*说明这是一个a标签*/
            text: 'click me'    /*标签的内容*/
        }
    ]
}
复制代码

渲染后能够获得

<div>
    <a>click me</a>
</div>
复制代码

更新视图

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

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

那么咱们为何不能只修改那些 「改变了的地方」 呢？这个时候就要介绍咱们的「patch」了。咱们会将新的 VNode 与旧的 VNode 一块儿传入 patch 进行比较，通过 diff 算法得出它们的 「差别」 。最后咱们只须要将这些 「差别」 的对应 DOM 进行修改便可。

事实上。vue2并无实现节点上vdom更新，在vue3上才有望实现（2019vueconf大会尤雨奚）

new vue 初始化-mounted挂载-compile-render-createElement虚拟节点-(返回普通vnode或者createcomponents建立一个组件vnode，这个节点是vue的一个子类,总之返回的都是vnode，这个vnode可能有若干个子节点，它们也是vnode类型，这里就能够描述为vnode-tree)-update->patch(createElm做用是，若是vnode是普通的节点就建立真实的dom节点插入父元素下，若是节点vnode 的tag标明是组件，根据vnode建立一个组件节点，而且执行相应的钩子函数，这个过程就是遍历全部的子vnode,若是它的子节点vnode又是个组件，重复刚才的过程render-建立虚拟节点，这个过程是一个深度优先遍历的算法。