vue2-组件渲染和更新过程总结

535 阅读1分钟

初次渲染过程

  • 开发环境,vue-loader会将template解析为render函数
  • 触发响应式,监听data属性getter setter
  • 执行render函数生成vnode,通过patch(elem,vnode)将vnode挂载到根节点,完成渲染

ps:执行render函数模板编译时候就已经触发了getter,然后收集依赖触发哪个getter就watcher哪个,后续修改时候看修改的data是不是之前被watcher的data,如果是就重新触发render。

更新过程

修改data触发setter,保证该data值之前在getter中已经被监听。再重新执行render函数生成newVnode,再执行patch(vnode,newVnode)