【Vue原理】Component - 白話版

liuyix 發布于2019-08-23 18:32 / 675人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版從模板上使用到掛載到頁面

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

【Vue原理】Component - 白話版

component 從模板上使用到掛載到頁面上，到底經歷了一個怎么樣的流程？？里面到底摻雜了什么神奇的東西，母豬為何半夜慘叫，這一切的背后，究竟是....

好吧，馬上進入主題，component 掛載流程

好了，既然說的是 component，那么其他的無關步驟自然是要略過的

總的說起來，component 創建流程，就兩個步驟

1、創建 component 外殼VNode
2、掛載 component dom

我們一步一步來說

創建組件vnode

“這里說的組件vnode，是外殼vnode，不懂下面會說”

現在有一個頁面A 使用是了 test 組件

然后頁面被解析成了一個渲染函數

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

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

執行到 _c("test")，需要構建一個標簽為 test 的 vnode，但是發現，誒？test 不是一個正常的 html 標簽啊

于是送去非正常標簽研究院進行研究，哈哈，就是去做一些特殊處理

做的是什么呢？

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

2、創建組件外殼VNode，就是下面這個

相信大家應該清楚什么是外殼節點了，細節可以跳到下文相關內容看

VNode - 源碼版

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

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

來打印看下

只有 tag 判斷屬于組件之后，才會進行這一步。現在這一步就結束了，到下一步掛載

掛載組件dom

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

那么下一步就是根據VNode 創建DOM，然后進行掛載了喂

此時！

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

然后！

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

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

做了什么研究？

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

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

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

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

具體流程可以參考下文

從模板到DOM的簡要流程

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

總結

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

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

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

GPU云服務器云服務器 vue安卓版 component react-component Icon React Component

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105402.html

【Vue原理】Event - 源碼版之綁定組件自定義事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件自定義事件組件寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

amuqiao 2019-08-23 18:36 評論0 收藏0
【Vue原理】Component - 源碼版之創建組件VNode

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之創建組件今天就要開啟我寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

hover_lew 2019-08-23 18:34 評論0 收藏0
【Vue原理】Component - 源碼版之掛載組件DOM

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之掛載組件由這篇文章從模寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

lbool 2019-08-23 18:34 評論0 收藏0
【Vue原理】NextTick - 源碼版之服務Vue

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】NextTick - 源碼版之服務Vue 初次看的兄弟可以先看【Vue原理】NextTick - 白話版簡單了解下...

Acceml 2019-08-26 18:36 評論0 收藏0
【Vue原理】Mixins - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Mixins - 源碼版今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理篇幅會有些長，...

gotham 2019-08-23 18:32 評論0 收藏0