第一步:初始化及挂载
在new Vue()之后,会首先调用_init函数对传入的options对象进行初始化,它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」。
「依赖收集」:我们在闭包中增加了一个 Dep 类的对象,用来收集 Watcher 对象。在对象被「读」的时候,会触发 reactiveGetter 函数把当前的 Watcher 对象(存放在 Dep.target 中)收集到 Dep 类中去。之后如果当该对象被「写」的时候,则会触发 setter 方法,通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图。
初始化完成后,会调用$mount挂载组件。
第二步:对挂载的template模板进行Compile
compile 的作用是解析模板,生成渲染模板的 render函数
// 如下模板
<div>
<span></span>
{{ num }}
</div>
//编译后的render函数
_c('div', [_c('span'), _v(num)])
第三步:数据更新视图
数据更新时,Watcher对象会调用update方法来修改视图,实际上是将新的VNode和旧的VNode进行的一个patch过程,这部分在之前的文章已经介绍过了。
虚拟DOM转换为真实DOM使用的是document.createElement。