主题
渲染过程
初次渲染
- 解析模板为
render函数
(或在开发坏境完成,vue-loader
) - 触发
响应式
,监听 data 属性 getter setter - 执行 render 函数,生成
vnode
patch(elem,vnode)
更新过程
- 修改 data,触发
setter
(此前在 getter 中已被监听) - 重新执行 render 函数,生成
newVnode
patch(vnode, newVnode)
异步渲染
- 每次触发某个数据的 setter 方法后,对应的额 Watcher 对象会被 push 进一个队列中
- 在一个更新时,会吧队列的 Watcher 拿出,触发上面的 patch 操作
顺序
- 父的 Watcher 相比于子的 Watcher 优先执行
- 同一个 Watcher 只应被执行一次,所以会给同一个 Watcher 标上增量的 id,只执行最后相同一个 Watcher