資訊專欄INFORMATION COLUMN
摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版從模板上使用到掛載到頁面
寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧
【Vue原理】Component - 白話版
component 從模板上使用到掛載到頁面上，到底經(jīng)歷了一個(gè)怎么樣的流程？？里面到底摻雜了什么神奇的東西，母豬為何半夜慘叫，這一切的背后，究竟是....
component 從模板上使用到掛載到頁面上，到底經(jīng)歷了一個(gè)怎么樣的流程？？里面到底摻雜了什么神奇的東西，母豬為何半夜慘叫，這一切的背后，究竟是....
好吧，馬上進(jìn)入主題，component 掛載流程
好了，既然說的是 component，那么其他的無關(guān)步驟自然是要略過的
總的說起來，component 創(chuàng)建流程，就兩個(gè)步驟
1、創(chuàng)建 component 外殼VNode 2、掛載 component dom
我們一步一步來說
創(chuàng)建組件vnode“這里說的組件vnode，是外殼vnode，不懂下面會(huì)說”
現(xiàn)在有一個(gè)頁面A 使用是了 test 組件
然后頁面被解析成了一個(gè)渲染函數(shù)
現(xiàn)在要開始執(zhí)行頁面A渲染函數(shù)，這個(gè)渲染函數(shù)執(zhí)行得到 【模板對應(yīng)的 VNode】
其中 _c 的作用就是，根據(jù)傳入的參數(shù)，構(gòu)造相應(yīng)的 VNode
執(zhí)行到 _c("test")，需要構(gòu)建一個(gè)標(biāo)簽為 test 的 vnode，但是發(fā)現(xiàn)，誒？test 不是一個(gè)正常的 html 標(biāo)簽啊
于是送去非正常標(biāo)簽研究院進(jìn)行研究 ，哈哈，就是去做一些特殊處理
做的是什么呢？
1、構(gòu)建組件的構(gòu)造函數(shù)，處理父組件給子組件綁定的數(shù)據(jù)，比如 props，事件，slot 等等
2、創(chuàng)建組件外殼VNode，就是下面這個(gè)
相信大家應(yīng)該清楚什么是外殼節(jié)點(diǎn)了，細(xì)節(jié)可以跳到下文相關(guān)內(nèi)容看
VNode - 源碼版
外殼節(jié)點(diǎn)，就是用來保存 父組件和子組件 進(jìn)行PY交易重要場所
就是為了保存了上一步處理得到的 組件構(gòu)造函數(shù)，props，事件，slot 等
來打印看下
只有 tag 判斷屬于組件之后，才會(huì)進(jìn)行這一步。現(xiàn)在這一步就結(jié)束了，到下一步掛載
掛載組件dom當(dāng)頁面A渲染函數(shù)執(zhí)行完畢，得到了一棵模板對應(yīng)的VNode 樹
那么下一步就是 根據(jù)VNode 創(chuàng)建DOM，然后進(jìn)行掛載了喂
此時(shí)！
Vue 需要遞歸遍歷 頁面的 VNode 樹，進(jìn)行生成對應(yīng)的DOM
然后！
每遍歷到一個(gè)標(biāo)簽都要判斷一次，這個(gè)標(biāo)簽是否是組件啊巴拉巴拉的
直到碰到了 test 這個(gè)比，你不是組件嗎，繼續(xù)送去研究所研究
做了什么研究？
1、拿到 test 外殼節(jié)點(diǎn)保存的構(gòu)造函數(shù)
2、new 構(gòu)造函數(shù)() 執(zhí)行，得到新建的組件實(shí)例，完成實(shí)例初始化
3、根據(jù)上一步生成的實(shí)例，調(diào)用掛載函數(shù)，解析組件內(nèi)部模板，然后生成DOM，掛載到父頁面A 中
解析內(nèi)部模板，就是處理正常的標(biāo)簽掛載了（排除組件嵌套）
具體流程可以參考下文
從模板到DOM的簡要流程
好的，到此，component 構(gòu)建的流程完美結(jié)束了
總結(jié)組件的掛載是和頁面掛載過程息息相關(guān)的，就只有兩個(gè)步驟
1、頁面解析模板得到 VNode 時(shí)：創(chuàng)建組件構(gòu)造函數(shù) + 生成外殼節(jié)點(diǎn)保存 父子關(guān)聯(lián)的數(shù)據(jù)
2、頁面開始掛載 DOM 時(shí)：新建建組件實(shí)例，解析組件內(nèi)部模板，生成DOM掛載到父頁面
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105402.html
摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定組件自定義事件組件 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之創(chuàng)建組件今天就要開啟我 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之掛載組件由這篇文章從模 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【Vue原理】NextTick - 源碼版 之 服務(wù)Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡單了解下...
寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【Vue原理】Mixins - 源碼版 今天探索的是 mixins 的源碼，mixins 根據(jù)不同的選項(xiàng)類型會(huì)做不同的處理 篇幅會(huì)有些長，...
閱讀 794·2021-11-12 10:36
閱讀 3373·2021-09-08 10:44
閱讀 2745·2019-08-30 11:08
閱讀 1402·2019-08-29 16:12
閱讀 2673·2019-08-29 12:24
閱讀 896·2019-08-26 10:14
閱讀 684·2019-08-23 18:32
閱讀 1173·2019-08-23 17:52
