vue实例挂载过程

以下仅为个人见解。 

1.大致流程：

1. new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上；
2. 在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版，并生成render()函数；
3. 挂载到vm上后，会再次调用$mount()并返回调用mountComponet()方法，mountComponet中的updateComponent()方法调用vue原型上的render()和update()方法，最后进行页面渲染

2. Vue.prototype._init

主要初始化proxy拦截器，初始化组件事件监听，初始化渲染方法，初始化依赖注入，初始化数据（props/data/method/computed/watch），初始化provide注入，调用$mount()

    // 初始化proxy拦截器initProxy(vm)// 初始化组件生命周期标志位initLifecycle(vm)// 初始化组件事件侦听initEvents(vm)// 初始化渲染方法initRender(vm)callHook(vm, 'beforeCreate')// 初始化依赖注入内容，在初始化data、props之前initInjections(vm) // resolve injections before data/props// 初始化props/data/method/computed/watchinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, 'created')....vm.$mount(vm.$options.el)

3. Vue.prototype.$mount()首次调用进行模版编译

1.可以在对象中定义template/render或者直接使用template、el表示元素选择器
2.将template解析ast tree
3.将ast tree转换成render语法字符串
4.生成render方法

template获取过程：

 4.生成render()函数后，会挂载到vm上，然后再次调用vue原型上的$mount()方法

 此次调用会返回mountComponent()

// public mount method
Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefined// 渲染组件return mountComponent(this, el, hydrating)
}

updateComponent(): mountComponent()中调用updateComponent()执行初始化时原型上的_render和_update()方法

// 定义更新函数updateComponent = () => {// 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_rendervm._update(vm._render(), hydrating)}

5.Vue.prototype.render方法

主要是生成VNode

6.Vue.prototype.update方法

_update主要功能是调用patch，将vnode转换为真实DOM，并且更新到页面中 

参考：

面试官：Vue实例挂载的过程 | web前端面试 - 面试官系列