在理解Vue之前，我们要对Vue有一个大概的了解。
QQ20180505-105556@2x.png
整个Vue的过程大致如上图一样。下面我们分别来认识每一步都是干什么的。
总体来说，大致分为三部分。
初始化和挂载
在我们使用new Vue()来初始化的时候，会调用_init()函数，在整个函数里会进行一系列的操作，包括生命周期、事件、props、data、methods、watch、computed等等，其中还有一个重要的是，会通过Object.defineProperty()来设置setter和getter，来实现响应式和依赖收集
下面是Vue中的_init()代码片段，我们可以大致的看到，在这里，Vue做了一系列的初始化操作，如initLifecycle(vm)、initEvents(vm)等等。
function initMixin(Vue) {
Vue.prototype._init = function (options) {
var vm = this;
// a uid
vm._uid = uid$3++;
var startTag, endTag;
/* istanbul ignore if */
if ("development" !== 'production' && config.performance && mark) {
startTag = "vue-perf-start:" + (vm._uid);
endTag = "vue-perf-end:" + (vm._uid);
mark(startTag);
}
vm._isVue = true;
if (options && options._isComponent) {
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm);
}
/* istanbul ignore else */ {
initProxy(vm);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm); // 初始化事件
initRender(vm); // 初始化render
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
/* istanbul ignore if */
if ("development" !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(("vue " + (vm._name) + " init"), startTag, endTag);
}
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
}
编译
第二个部分就是编译，在这一步，Vue需要对代码进行下面三步：
- parse
- optimize
- generate
这三步最终的目的是得到渲染Virtual DOM 的 render function。
parse(解析)
一般的，Vue会使用正则来进行代码的解析，来对每个字符逐个检查，获取代码中的指令、属性等等，并且生成AST。
optimize(优化)
这里的optimize处理，说白了，就是Vue在编译过程中的一个优化，主要作用是用来标记isStatic(静态节点)。以便后面发生update，进行patch的时候，会提升效率。因为会使用diff算法，并且diff算法会跳过静态节点，所以可以减少比较过程。
generate(生成)
在这里，Vue就会把前面parse的时候生成的AST进行转化，变成render function，然后会得到一个render的字符串以及staticRenderFns字符串。
如果写过react的会对render function比较熟悉，当然Vue也可以直接这么写。
响应式
到这里，也就到了Vue最核心的部分，也是几乎所有MV*框架的核心。前面我们说了，在
_init的过程中，会使用Object.defineProperty来设置setter和getter，来实现响应式和依赖收集。
前面我们得到了render function，在渲染的时候，肯定会对所需对象进行读取操作，所以这就触发了getter函数，从而进行依赖收集。
这里我们简单说下什么是依赖收集？
依赖收集的目的就是将观察者Watcher对象存放到当前闭包环境中的一个订阅者Dep的subs中，大致关系如下：
QQ20180505-113639@2x.png
在修改对象的时候，会触发setter，并通知Dep中所有的watcher，告诉他们自己的值发生了变化，需要进行调用uodate来更新视图。
当然，这一过程明显有资源浪费的地方，就是当某一个setter发生变化，会告知所有的watcher。对于这一点，Vue使用了一些diff算法来解决。
简单来说，响应式通过使用Object.defineProperty来设置setter和getter, 当发生setter的时候，会告知watcher，执行render function 获得新的VNode节点，并进行path过程，比较新旧DOM，然后进行update更新视图。
而在第一张图中的path，其作用是进行新旧DOM的比较，使用diff算法，从而只更新发生变化的DOM，达到性能的优化。
总结
这里我们将Vue整个全局的大概分为了三部分：
- 初始化以及挂载
- 编译
- 响应式
其中，在初始化的过程中Vue调用_init()函数做了一些如：data、prosp、事件、生命周期、computed、watch等初始化操作，并且调用Object.defineProperty()设置setter和getter，实现响应式和依赖收集。
在编译的过程中会存在parse、optimize、generate，最终得到一个render function，用来生成Virtual DOM，并进行响应式和依赖收集。
在响应式的过程中，通过触发setter来告知依赖收集中的watcher对象进行更新视图，在更新视图之前会通过path过程进行新旧DOM比较，达到性能优化的过程。
大致步骤如下：
new Vue() -> $mount -> complied(parse optimize generate) -> render function -> Vritual DOM and Watcher -> patch -> 生成DOM。
以上笔记是我 阅读 掘金小册 所得。
链接：https://juejin.im/book/5a36661851882538e2259c0f?inviteCode=596197525188257fd215e23e
网友评论