資訊專欄INFORMATION COLUMN
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧如果你覺得排版難看，請點擊下面公眾號
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
如果你覺得排版難看，請點擊下面公眾號鏈接
【Vue原理】Props - 白話版
今天我們用白話文解讀props 的工作原理
props 真的挺有用的，作為父傳子的載體，大家肯定都用過，但是你有沒有想過，Props 到底是怎么工作的？
希望先看下 響應式原理，對 props 理解很有幫助
響應式原理
開篇之前，我提出三個問題
1、父組件 怎么傳值給 子組件的 props
2、子組件如何讀取props
3、父組件 data 更新，子組件的props 如何更新
今天我們帶著三個問題去開始我們的講解
明白這三個問題，那么相信你也就理解了 props 的工作原理
場景設置現在我們有一個這樣的 根組件 A 和 他的 子組件 testb
根組件A 會 把 parentName 傳給 子組件 testb 的 props
根組件A 也是 組件testb 的 父組件
new Vue({
el:".a",
name:"A",
components:{
testb:{
props:{
childName:""
},
template: "父組件傳入的 props 的值 {{childName}}
",
}
},
data(){
return {
parentName:"我是父組件"
}
},
})
按照上面的例子，開始我們的問題解析
父組件怎么傳值給子組件的 props
這部分內容會比較多，但是這部分內容是 props 的重中之重，必須理解好吧
根據上面的場景設置，testb 是一個子組件，接收一個 props（child-name）
然后 根組件 A 把 自身的 parentName 綁定到 子組件的屬性 child-name 上
父組件的模板 會被解析成一個 模板渲染函數
(function() {
with(this){
return _c("div",{staticClass:"a"},[
_c("testb",{attrs:{"child-name":parentName}})
],1)
}
})
這段代碼需要解釋下
雖然想不涉及源碼，但是這段代碼對我們理解很有幫助，而且不難，所以決定放上來
1、_c 是渲染組件的函數，_c("testb") 表示渲染 testb 這個子組件
2、因為 with 的作用是，綁定大括號內代碼的 變量訪問作用域
3、這是一個匿名自執行函數，會在后面執行
簡化上面的函數，做個例子測試一下
function test(){
with(this){ console.log(parentName) }
}
test.call({parentName:"測試名字"})
你能看到，我給 test 綁定了一個對象作用域，加上 with 綁定 this，然后讀取 parentName 就會從 傳入的對象上獲取
了解了這個，我們來看下一步
之后，模板函數會被執行，執行時會綁定 父組件為作用域
所以渲染函數內部所有的變量，都會從父組件對象 上去獲取
綁定了父作用域之后， parentName 自然會從父組件獲取，類似這樣
{ attrs: { child-name: parentVm.parentName } }
函數執行了，內部的 _c("testb") 第一個執行，然后傳入了 賦值后的 attrs
父組件賦值之后的 attrs 就是下面這樣
{ attrs: { child-name: "我是父組件" } }
此時，父組件就正式 利用 props 把 parentName 傳給了 子組件的props child-name
_c("testb",{attrs:{"child-name":parentName}})
而 attrs 包含 普通屬性 和 props，所以需要 篩選出 props，然后保存起來
props 會被 保存到 實例的_props 中，并且 會逐一復制到 實例上，并且每一個屬性會被設置為響應式的
你看到的，每一個 實例都會有 一個 _props 的同時，也會把屬性直接放在 實例上。
我是不會騙你的好吧
組件怎么讀取 props通過上面的問題，我們知道了 子組件保存了 父組件 傳入 的數據
prop 的數據會被 逐一復制到 vm對象上（子組件的實例 this） 上
但是復制的時候，會對每個屬性，同時設置 get 和 set 函數，進行 訪問轉接 和 賦值轉接
下面是我簡化了源碼的一段代碼，了解一下
Object.defineProperty(vm, key, {
get() {
return this._props[key]
},
set(val) {
this._props[key] = val
}
});
我以 props 其中一個 屬性 childName 為例好吧
Object.defineProperty(childVm, childName, {
get() {
return this._props.childName
},
set(val) {
this._props.childName = val
}
});
你訪問 props 其中一個值 vm.childName，其實訪問的是 vm._props.childName
你賦值 vm.childName= 5 ，其實是賦值 vm._props.childName= 5
但是你直接在這里給 props 賦值，你是不會影響到 父組件的data 的好吧，兩個東西完全沒有關系
就像你老爸給錢你用，你怎么用，對老爸都沒有影響
總結
移花接木，貍貓換太子，就是 props 本人了，掛羊頭賣狗肉，很明顯違法行為，欺騙消費者
父組件數據變化，子組件props如何更新看過我上一篇文章的都知道
每一個實例都會存在 一個 專屬watcher
1、用于實例自己更新視圖
2、用于給 依賴的屬性保存，然后屬性變化的時候，通知實例更新
我已經在 上一篇講解過 響應式原理，如果這里你不明白，可以查看一下
【Vue原理】響應式原理 - 白話版
以 parentName 為例，講解更新，parentName 是 父組件的 data，然后傳給子組件的props
在 父組件渲染函數中
(function() {
with(this){
return _c("div",{staticClass:"a"},[
_c("testb",{attrs:{"child-name":parentName}})
],1)
}
})
因為 Vue 會對組件的渲染函數進行緩存，所以更新的時候，不需要重新解析，直接讀取緩存，會加快渲染速度
然后渲染函數執行，開啟新一輪的 props 賦值操作，回到了第一個問題，如果不記得，可以回去看下
總結1、父組件 data 的值 和 子組件的 props 一般是沒有任何聯系的，更改 props 不影響父組件 data，但是如果傳入的是 對象，那么修改對象，是會影響父組件的，因為數據是原樣傳入的，所以修改對象，兩個地方都會影響
2、props 也是響應式的，跟 data 本質 差不多
3、props 會訪問轉接，賦值轉接 ，其實操作的是 vm._props 的屬性
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105088.html
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。 幸好我做...
摘要：而我覺得現在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。而這個不會合并，直接替換掉整個選項 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版從模板上使用到掛載到頁面 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】NextTick - 源碼版 之 服務Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡單了解下...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Mixins - 源碼版 今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理 篇幅會有些長，...
閱讀 2132·2023-04-26 03:06
閱讀 3580·2023-04-26 01:51
閱讀 2085·2021-11-24 09:38
閱讀 2452·2021-11-17 17:00
閱讀 2324·2021-09-28 09:36
閱讀 941·2021-09-24 09:47
閱讀 2586·2019-08-30 15:54
閱讀 1554·2019-08-30 15:44
