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