Vue中DOM渲染的过程

vue中dom渲染过程
1、响应式
监听data属性的getter setter
2、模板编译
模板到render函数再到vnode。模板不是html，有指令、插值、js表达式，能够实现循环、判断。html是标签语言，只有js才能实现循环判断。因此，模板一定要转化成js，即编译模板。模板编译为render函数、执行render函数返回的vnode
3、收集依赖
在模板中使用那个变量就把那个变量观察起来（watch），这部分主要实现了从vdom转化为真实DOM、vnode新旧节点的对比操作。

数据更改触发的渲染过程
1、初次渲染过程
1）解析模板为render函数
2）触发响应式，监听data属性的getter、setter
3）执行render函数，生成vnode、patch（elem.vnode）
2、更新过程
1）修改data，触发setter
2）重新执行render函数，生成newVnode
3）patch(vnode,newVnode)更新视图

参考：https://www.jianshu.com/p/9e5b89161add