Skip to content

渲染过程

初次渲染

  1. 解析模板为render函数(或在开发坏境完成,vue-loader
  2. 触发响应式,监听 data 属性 getter setter
  3. 执行 render 函数,生成 vnode
  4. patch(elem,vnode)

更新过程

  1. 修改 data,触发 setter (此前在 getter 中已被监听)
  2. 重新执行 render 函数,生成 newVnode
  3. patch(vnode, newVnode)

异步渲染

  1. 每次触发某个数据的 setter 方法后,对应的额 Watcher 对象会被 push 进一个队列中
  2. 在一个更新时,会吧队列的 Watcher 拿出,触发上面的 patch 操作

顺序

  1. 父的 Watcher 相比于子的 Watcher 优先执行
  2. 同一个 Watcher 只应被执行一次,所以会给同一个 Watcher 标上增量的 id,只执行最后相同一个 Watcher