渲染和更新

图片

初次渲染过程

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

更新过程

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

异步渲染

  1. 汇总 data 的修改,一次性更新视图
  2. 减少 DOM 操作次数,提高性能
  3. 使用 $nextTick 监听渲染回调
最后更新时间:
贡献者: DESKTOP-ER5718D\zt