vue源碼解讀-組件的render過程

目錄導航

我們在之前分析_createElement的時候,曾經執行過這樣一段邏輯


之前我們的render方法是這樣的


這次我們的render方法是這樣的


它(tag)接收一個組件對象,因此tag==‘string’不成立,走else,調用createComponent方法,入參如下


首先判斷了Ctor是否存在,我們這里是一個組件對象,因此向下

當分析npm run build的時候,我們找到了entry-runtime-with-compiler文件,這是打包后的入口,我們又通過該文件對vue的引用一級一級去查找vue的定義,其中在src\core\index.js中我們調用了initGlobalAPI,而在該函數中,我們將vue掛載到了Vue.options._base上,即


因此,baseCtor和context一樣,即Vue實例

接著調用Vue.extend方法


該方法在initGlobalAPI的時候被掛載至vue

在該方法中做了以下幾件事

首先

? ? 使用單例模式保證多次import得到的是同一個實例


? ? 然后創建一個組件類并使其繼承Vue并返回?


????這樣就使得類Sub(即Ctor)擁有了和Vue一樣的能力

代碼向下,定義data={},并將其作為參數傳遞,執行installComponentHooks


該方法向data上掛載了hook


hook的值是


此時,data大概長這樣


接著便開始生成vnode


Vnode入參如下


生成的vnode如下




那么,組件Vnode又是如何被轉化為dom的呢?()

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容