背景

摸魚(yú)的時(shí)候看到有網(wǎng)友說(shuō)面試問(wèn)到了render函數(shù)和beforeMount鉤子哪個(gè)先觸發(fā)的問(wèn)題，我印象中是先觸發(fā)beforeMount鉤子，不過(guò)本著嚴(yán)謹(jǐn)?shù)木瘢芙^印象流，還是去翻了一下Vue2源碼。

想知道結(jié)論可以直接跳到文章末尾。

解析

從$mount方法開(kāi)始

$mount方法，也就是Vue掛載的起點(diǎn)。

這里可以看到，$mount方法其實(shí)就是調(diào)用mountCompenent并返回執(zhí)行結(jié)果

mountCompenent發(fā)生了什么？

這里截取關(guān)鍵部分

在這里已經(jīng)有結(jié)論了，beforeMount是在render函數(shù)調(diào)用之前觸發(fā)的，不過(guò)出于好奇，還是去第七行的_render函數(shù)里面看看細(xì)節(jié)

render函數(shù)的調(diào)用細(xì)節(jié)

轉(zhuǎn)到_render中

可以看到_render就是調(diào)用render函數(shù)并返回 vnode。不過(guò)在第10行可以發(fā)現(xiàn)，調(diào)用render函數(shù)的方式并不是直接調(diào)用，而是通過(guò)call方法，第一個(gè)參數(shù)是 render函數(shù)的this環(huán)境，第二個(gè)參數(shù)就是在render函數(shù)中的參數(shù)h。

第一個(gè)參數(shù)：vm._renderProxy

從上一部分得知，vm._renderProxy就是render函數(shù)的this環(huán)境，轉(zhuǎn)到相應(yīng)源碼看看。

可以看到，vm._renderProxy要么是vm本身，要么是vm的一個(gè)Proxy，據(jù)Proxy API的支持情況而定。如果是后者，情況就復(fù)雜一些：如果 options.render._withStripped為真，則Proxy的handler為getHandler_1，否則是hasHandler_1?？墒沁@個(gè)options.render._withStripped并沒(méi)有在Vue源碼中出現(xiàn)，最后在負(fù)責(zé)編譯sfc的 compiler-sfc.js中找到了。

// compiler-sfc.js
// mark with stripped (this enables Vue to use correct runtime proxy
// detection)
code += `render._withStripped = true`;

變量code就是sfc編譯后的js代碼，也就是說(shuō)如果是sfc就是getHandler_1，否則就是hasHandler_1，以上這兩個(gè)handler的代碼就不貼了，不然又是一個(gè)新坑=.=

總而言之，這個(gè)vm._renderProxy就是vm，只不過(guò)通過(guò)Proxy做了一些特殊處理。

第二個(gè)參數(shù)：vm.$createElement

讀過(guò)snabbdom的應(yīng)該都認(rèn)識(shí)這個(gè)函數(shù)，畢竟vue借鑒了snabbdom。源碼太長(zhǎng)就不貼了，只要知道它最終調(diào)用_createElement返回vnode就行。

結(jié)論

• render函數(shù)的調(diào)用時(shí)機(jī)是在beforeMount之后和mounted之前。
• 通過(guò)call將render函數(shù)的this綁定到了vm，并且會(huì)根據(jù)Proxy的支持情況和是否是SFC來(lái)做一些不同的處理。
• render函數(shù)的參數(shù)h的作用是創(chuàng)建vnode

以上就是Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析的詳細(xì)內(nèi)容，更多關(guān)于Vue render函數(shù)調(diào)用執(zhí)行的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論