Vue的渲染过程
我们从最简单的new Vue开始：
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
- Vue在渲染的时候先调用原型上的_render函数将组件对象转化成一个VNode实例；而_render是通过调用createElement和createEmptyVNode两个函数进行转化；
- createElement的转化过程会根据不同的情形选择new VNode或者调用createComponent函数做VNode实例化；
-
完成VNode实例化后，这时候Vue调用原型上的_update函数把VNode渲染成真实DOM，这个过程又是通过调用patch函数完成的（这就是patch阶段了）
用一张图表达：
vue渲染过程.jpg
Vue的渲染小结
1、new Vue，执行初始化
2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3、通过Watcher监听数据的变化
4、当数据发生变化时，Render函数执行生成VNode对象
5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
至此，整个new Vue的渲染过程完毕。
从模板到真实dom节点还需要经过一些步骤
1、把模板编译为render函数
2、实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
3、对比虚拟dom，渲染到真实dom
4、组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3
