Vue2.1.7源码学习

let v = new Vue({
    el: '#app',
    data: {
        a: 1,
        b: [1, 2, 3]
    }
})

按照我们的例子那样写，初始化工作只包含两个主要内容即：initData 和 initRender

通过 initData 看Vue的数据响应系统
Vue的数据响应系统包含三个部分：Observer、Dep、Watcher。

大家注意数据的每一个字段都拥有自己的 dep 对象和 get 方法。

这样 Vue 就建立了一套数据响应系统。

通过 initRender 看Vue的 render(渲染) 与 re-render(重新渲染)
web-runtime-with-compiler.js 的逻辑如下：
1、缓存来自 web-runtime.js 文件的 mount 方法
3、如果没有传递 render 选项，那么查看有没有 template 选项，如果有就使用 compileToFunctions 函数根据其内容编译成 render 函数
4、如果没有 template 选项，那么查看有没有 el 选项，如果有就使用 compileToFunctions 函数将其内容(template = getOuterHTML(el))编译成 render 函数
5、将编译成的 render 函数挂载到 this.mount 方法

现在我们来好好理理思路，当我们写如上代码时：
Vue 所做的事：

1、构建数据响应系统，使用 Observer 将数据data转换为访问器属性；将 el 编译为 render 函数，render 函数返回值为虚拟DOM
2、在 _mount 中对 _update 求值，而 _update 又会对 render 求值，render 内部又会对依赖的变量求值，收集为被求值的变量的依赖，当变量改变时，_update 又会重新执行一遍，从而做到 re-render。