Vue首次渲染的过程——Vue源码学习总结(一)

Vue首次渲染的过程

1.首先是Vue实例的初始化过程，挂载一些全局的静态方法，以及原型上的一些方法。
2.在_init函数的最后调用mount,$mount中调用mountComponent
3.在mountComponent中new一个Wactcher，并传入vm._update(vm._render)
4.在watcher中，把vm._update(vm._render)赋值给getter，最后调用get方法，在get方法中调用getter真正开始渲染视图
5.vm._render其实就是用来创建虚拟DOM的（render函数怎么来的后面文章会更新），vm._update内部调用patch来挂载dom。

关于组件的渲染：
组件的VNode比实例先创建，创建组件vnode的过程中会把组件的构造函数放在VNode下，也就是说在patch的过程中，需要调用createElm把VNode
转换为真是dom，在这个方法中会检测是否为组件VNode，如果是就调用createComponent。在createComponent中会调用组件的init的钩子函数，在
init的钩子函数中才会真正去创建组件的实例createComponentInstanceForVnode()，触发挂载在VNode下的组件构造函数，即也调用vue中的_init方法初始化实例。在_init方法中，会判断当前实例是否为组件，然后会调用关于组件的一些初始化方法initInternalComponent(options)，最后把初始化好的componentInstance挂载到组件的VNode下，在componentInstance中会拿到$el。它存在于vm下的componentInstace属性当中。最终创建好组件实例，把组件实例挂载到VNode之后，回到createComponent中，此时在componentInstance下拿
到el,然后把它挂载到dom树上，这样组件才渲染出来。

createElm—遇到组件VNode—>createComponent------>组件的钩子函数init--------->调用挂载在VNode下的组件构造函数--------->触发实例的_init方法
—判断是否为组件---->initInternalComponent(options)把初始化好的componentInstance挂载到组件VNode下-------->最终回到createComponent拿到VNode，添加到dom树