以下僅為個(gè)人見(jiàn)解。?

1.大致流程：

1. new Vue()時(shí)會(huì)調(diào)用initMixin(Vue)將_init掛載到vue原型上；
2. 在_init()中調(diào)用$mount()方法($mount()方法也是掛載到vue原型上的)編譯template模版，并生成render()函數(shù)；
3. 掛載到vm上后，會(huì)再次調(diào)用$mount()并返回調(diào)用mountComponet()方法，mountComponet中的updateComponent()方法調(diào)用vue原型上的render()和update()方法，最后進(jìn)行頁(yè)面渲染

2. Vue.prototype._init

主要初始化proxy攔截器，初始化組件事件監(jiān)聽(tīng)，初始化渲染方法，初始化依賴(lài)注入，初始化數(shù)據(jù)（props/data/method/computed/watch），初始化provide注入，調(diào)用$mount()

    // 初始化proxy攔截器initProxy(vm)// 初始化組件生命周期標(biāo)志位initLifecycle(vm)// 初始化組件事件偵聽(tīng)initEvents(vm)// 初始化渲染方法initRender(vm)callHook(vm, 'beforeCreate')// 初始化依賴(lài)注入內(nèi)容，在初始化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()首次調(diào)用進(jìn)行模版編譯

1.可以在對(duì)象中定義template/render或者直接使用template、el表示元素選擇器
2.將template解析ast tree
3.將ast tree轉(zhuǎn)換成render語(yǔ)法字符串
4.生成render方法

template獲取過(guò)程：

?4.生成render()函數(shù)后，會(huì)掛載到vm上，然后再次調(diào)用vue原型上的$mount()方法

?此次調(diào)用會(huì)返回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()中調(diào)用updateComponent()執(zhí)行初始化時(shí)原型上的_render和_update()方法

// 定義更新函數(shù)updateComponent = () => {// 實(shí)際調(diào)?是在lifeCycleMixin中定義的_update和renderMixin中定義的_rendervm._update(vm._render(), hydrating)}

5.Vue.prototype.render方法

主要是生成VNode

6.Vue.prototype.update方法

_update主要功能是調(diào)用patch，將vnode轉(zhuǎn)換為真實(shí)DOM，并且更新到頁(yè)面中?

參考：

面試官：Vue實(shí)例掛載的過(guò)程 | web前端面試 - 面試官系列