【Vue原理】Component - 白話版

寫文章不容易，點個讚唄兄弟 專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧 研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】Component - 白話版

component 從模板上使用到掛載到頁面上，到底經歷了一個怎麼樣的流程？？裏面到底摻雜了什麼神奇的東西，母豬爲什麼半夜慘叫，這一切的背後，到底是....

component 從模板上使用到掛載到頁面上，到底經歷了一個怎麼樣的流程？？裏面到底摻雜了什麼神奇的東西，母豬爲什麼半夜慘叫，這一切的背後，到底是....

好吧，立刻進入主題，component 掛載流程

好了，既然說的是 component，那麼其餘的無關步驟天然是要略過的

總的提及來，component 建立流程，就兩個步驟

一、建立 component 外殼VNode
二、掛載 component dom

咱們一步一步來講

---

建立組件vnode

「這裏說的組件vnode，是外殼vnode，不懂下面會說」

如今有一個頁面A 使用是了 test 組件

而後頁面被解析成了一個渲染函數

如今要開始執行頁面A渲染函數，這個渲染函數執行獲得 【模板對應的 VNode】

其中 _c 的做用就是，根據傳入的參數，構造相應的 VNode

執行到 _c('test')，須要構建一個標籤爲 test 的 vnode，可是發現，誒？test 不是一個正常的 html 標籤啊

因而送去非正常標籤研究院進行研究 ，哈哈，就是去作一些特殊處理

作的是什麼呢？

一、構建組件的構造函數，處理父組件給子組件綁定的數據，好比 props，事件，slot 等等

二、建立組件外殼VNode，就是下面這個

相信你們應該清楚什麼是外殼節點了，細節能夠跳到下文相關內容看

VNode - 源碼版

外殼節點，就是用來保存 父組件和子組件 進行PY交易重要場所

就是爲了保存了上一步處理獲得的 組件構造函數，props，事件，slot 等

來打印看下

只有 tag 判斷屬於組件以後，纔會進行這一步。如今這一步就結束了，到下一步掛載

---

掛載組件dom

當頁面A渲染函數執行完畢，獲得了一棵模板對應的VNode 樹

那麼下一步就是 根據VNode 建立DOM，而後進行掛載了喂

此時！

Vue 須要遞歸遍歷 頁面的 VNode 樹，進行生成對應的DOM

而後！

每遍歷到一個標籤都要判斷一次，這個標籤是不是組件啊巴拉巴拉的

直到碰到了 test 這個比，你不是組件嗎，繼續送去研究所研究

作了什麼研究？

一、拿到 test 外殼節點保存的構造函數

二、new 構造函數() 執行，獲得新建的組件實例，完成實例初始化

三、根據上一步生成的實例，調用掛載函數，解析組件內部模板，而後生成DOM，掛載到父頁面A 中

解析內部模板，就是處理正常的標籤掛載了（排除組件嵌套）

具體流程能夠參考下文

從模板到DOM的簡要流程

好的，到此，component 構建的流程完美結束了

---

總結

組件的掛載是和頁面掛載過程息息相關的，就只有兩個步驟

一、頁面解析模板獲得 VNode 時：建立組件構造函數 + 生成外殼節點保存 父子關聯的數據

二、頁面開始掛載 DOM 時：新建建組件實例，解析組件內部模板，生成DOM掛載到父頁面