vue的模板渲染和更新过程

1. 解析模板为 render 函数

这部分是说vue 编译相关，也就是说把 vue 语法编译 成 js 语法，通过执行 vue-template-compiler 的 compiler 函数，得到 render

2. 触发响应式

响应式关键 Object.defineProperty()，将模版初次渲染使用到的变量绑定到 Object.defineProperty() 中，首次渲染会 触发 getter

3. 执行render 函数

第一点说到已经得到render函数，现在要执行render函数， 将 vue 语法转成 h 函数的结果，也就是 vNode，后续进行一系列操作

render函数，此时模板已经编译完了，然后再生成一个vNode，执行函数的时候会触发Data里面的getter，触发的时候就会收集依赖，触发哪个就会watcher观察起来，修改Data的时候，就会触发setter，看修改的data是不是之前被观察起来的，如果是就重新re-render，重新渲染，生成newVnode。patch

另一种图

首先new Vue()之后会进入初始化阶段，初始化的东西有很多，如我们的常见的生命周期，事件，属性与状态，计算属性与watch，并实现数据的响应式。

初始化完成之后就是挂载阶段，如果是使用template模板并且处于运行时编译的状态，那么会进行编译阶段。

编译阶段由parse, optimize, generate组成，分别用来解析模板语法并生成AST，标记静态节点以优化，将AST转化为render function string的过程，这样就准备完成了渲染VNode所需的render function。

更新阶段主要由响应式支撑，当render function string时，因为会读取所需对象，会触发getter函数（2或3）进行依赖收集，随后修改对象时，setter会通知之前依赖收集的每一个watcher，让他们调用update来更新视图。

再回到render function string那一步，它最终会转化为VNode并再度生成真实DOM Node，而响应式更新后会通过patch比较，使用Diff算法统一将更新打包到真实的DOM Tree上。

这样就走完了整个Vue的流程。