vue渲染页面的流程_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