Vue——浅谈运行机制

第一步：初始化及挂载

在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。