【Vue原理】Props - 白話版

時間 2019-12-05

標籤 Vue原理 props 白話简体版

原文原文鏈接

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

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

【Vue原理】Props - 白話版java

今天咱們用白話文解讀props 的工做原理緩存

props 真的挺有用的，做爲父傳子的載體，你們確定都用過，可是你有沒有想過，Props 究竟是怎麼工做的？函數

但願先看下響應式原理，對 props 理解頗有幫助學習

響應式原理測試

開篇以前，我提出三個問題ui

一、父組件怎麼傳值給子組件的 propsthis

二、子組件如何讀取propsspa

三、父組件 data 更新，子組件的props 如何更新

今天咱們帶着三個問題去開始咱們的講解

明白這三個問題，那麼相信你也就理解了 props 的工做原理

場景設置

如今咱們有一個這樣的根組件 A 和他的子組件 testb

根組件A 會把 parentName 傳給子組件 testb 的 props

根組件A 也是組件testb 的父組件

<div class="a" >
    <testb :child-name="parentName" ></testb>
</div>
複製代碼

new Vue({    
    el:".a",        
    name:"A",    
    components:{        
        testb:{            
            props:{                
                childName:""
            },            
        template: '<p>父組件傳入的 props 的值 {{childName}}</p>',
        }
    },
    data(){        
        return {            
            parentName:"我是父組件"
        }
    },
})
複製代碼

按照上面的例子，開始咱們的問題解析

父組件怎麼傳值給子組件的 props

這部份內容會比較多，可是這部份內容是 props 的重中之重，必須理解好吧

一、props 傳值的設置

根據上面的場景設置，testb 是一個子組件，接收一個 props（child-name）

而後根組件 A 把自身的 parentName 綁定到子組件的屬性 child-name 上

二、props 父傳子前

父組件的模板會被解析成一個模板渲染函數

(function() {    

    with(this){  

        return _c('div',{staticClass:"a"},[

            _c('testb',{attrs:{"child-name":parentName}})

        ],1)

    }

})
複製代碼

這段代碼須要解釋下

雖然想不涉及源碼，可是這段代碼對咱們理解頗有幫助，並且不難，因此決定放上來

一、_c 是渲染組件的函數，_c('testb') 表示渲染 testb 這個子組件

二、由於 with 的做用是，綁定大括號內代碼的變量訪問做用域

三、這是一個匿名自執行函數，會在後面執行

簡化上面的函數，作個例子測試一下

function test(){    

    with(this){ console.log(parentName) }

}
test.call({parentName:"測試名字"})
複製代碼

你能看到，我給 test 綁定了一個對象做用域，加上 with 綁定 this，而後讀取 parentName 就會從傳入的對象上獲取

瞭解了這個，咱們來看下一步

三、props 開始賦值

以後，模板函數會被執行，執行時會綁定父組件爲做用域

因此渲染函數內部全部的變量，都會從父組件對象上去獲取

綁定了父做用域以後， parentName 天然會從父組件獲取，相似這樣

{ attrs: { child-name: parentVm.parentName } }

複製代碼

函數執行了，內部的 _c('testb') 第一個執行，而後傳入了賦值後的 attrs

父組件賦值以後的 attrs 就是下面這樣

{ attrs: { child-name: "我是父組件" } }
複製代碼

此時，父組件就正式利用 props 把 parentName 傳給了子組件的props child-name

四、子組件保存 props

_c('testb',{attrs:{"child-name":parentName}})
複製代碼

而 attrs 包含普通屬性和 props，因此須要篩選出 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

這個watcher 的做用

一、用於實例本身更新視圖

二、用於給依賴的屬性保存，而後屬性變化的時候，通知實例更新

我已經在上一篇講解過響應式原理，若是這裏你不明白，能夠查看一下

【Vue原理】響應式原理 - 白話版

以 parentName 爲例，講解更新，parentName 是父組件的 data，而後傳給子組件的props

parentName 會收集父組件的 watcher

在父組件渲染函數中

(function() {    

    with(this){  

        return _c('div',{staticClass:"a"},[

            _c('testb',{attrs:{"child-name":parentName}})

        ],1)

    }

})
複製代碼