vue页面的渲染过程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue页面的渲染过程相关的知识，希望对你有一定的参考价值。
参考技术A 我们从最简单的new Vue开始：1、new Vue，执行初始化
2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3、通过Watcher监听数据的变化
4、当数据发生变化时，Render函数执行生成VNode对象
5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
至此，整个new Vue的渲染过程完毕。
1、把模板编译为render函数
2、实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
3、对比虚拟dom，渲染到真实dom
4、组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3
详见链接： https://segmentfault.com/a/1190000018495383
以上是关于vue页面的渲染过程的主要内容，如果未能解决你的问题，请参考以下文章
electron-vue架构解析4-页面元素渲染过程分析（原）