背景

摸魚的時候看到有網(wǎng)友說面試問到了render函數(shù)和beforeMount鉤子哪個先觸發(fā)的問題，我印象中是先觸發(fā)beforeMount鉤子，不過本著嚴謹?shù)木?，拒絕印象流，還是去翻了一下Vue2源碼。

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

解析

從$mount方法開始

$mount方法，也就是Vue掛載的起點。

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

mountCompenent發(fā)生了什么？

這里截取關鍵部分

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

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

轉到_render中

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

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

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

可以看到，vm._renderProxy要么是vm本身，要么是vm的一個Proxy，據(jù)Proxy API的支持情況而定。如果是后者，情況就復雜一些：如果 options.render._withStripped為真，則Proxy的handler為getHandler_1，否則是hasHandler_1?？墒沁@個options.render._withStripped并沒有在Vue源碼中出現(xiàn)，最后在負責編譯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代碼，也就是說如果是sfc就是getHandler_1，否則就是hasHandler_1，以上這兩個handler的代碼就不貼了，不然又是一個新坑=.=

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

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

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

結論

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

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