Vue中我們通過$mount實(shí)例方法掛載vm介评,$mount方法在多個(gè)地方有定義卜壕,因?yàn)関ue可以跨平臺例如weex進(jìn)行開發(fā)廉羔;主要了解在web這邊的vue.js瞄勾,compiler解析版本的$mount實(shí)現(xiàn)糊昙。
src/platform/web/entry-runtime-with-compiler.js
主要流程:
1. 緩存原型上的$mount方法辛掠,再重新定義該方法
2. 對el做限制,Vue不能掛載在body释牺、html這樣的根節(jié)點(diǎn)
3. 關(guān)鍵步驟:如果沒有render方法萝衩,則會(huì)把el或者template都轉(zhuǎn)成render方法,最終無論.vue文件開發(fā)組件或者el没咙、template屬性猩谊,都會(huì)轉(zhuǎn)成render方法。這個(gè)過程叫做“在線編譯”镜撩,通過調(diào)用compilerToFunctions方法實(shí)現(xiàn)预柒。
4. 最后調(diào)用原先緩存的$mount掛載
Vue.prototype.$mount位于src/platform/web/runtime/index.js
這樣設(shè)計(jì)為了通用,在runtime only的時(shí)候能夠使用
$mount方法實(shí)際上調(diào)用了mountComponent方法袁梗,這個(gè)方法定義在src/core/instance/lifecycle.js文件中
核心流程
1. 實(shí)例化一個(gè)渲染Watcher
2. 在Watcher回調(diào)函數(shù)中調(diào)用updateComponent()方法
3. 在updateComponent()方法中調(diào)用vm._render方法生成虛擬Node宜鸯,最終調(diào)用vm._update更新DOM
Watcher的作用
當(dāng)初始化或者vm實(shí)例中監(jiān)測數(shù)據(jù)發(fā)生變化時(shí)候都會(huì)執(zhí)行回調(diào)函數(shù)updateComponent()更新DOM
判斷是否掛載的依據(jù)
函數(shù)最后根據(jù)根節(jié)點(diǎn)上vm._isMounted是否為true,判斷實(shí)例是否掛載
根節(jié)點(diǎn):vm.$vnode表示vm實(shí)例的父虛擬節(jié)點(diǎn)遮怜,為null即為根節(jié)點(diǎn)淋袖。