props屬性監(jiān)聽(tīng)不到值變化問(wèn)題

在寫(xiě)項(xiàng)目時(shí)遇到一個(gè)問(wèn)題，父組件傳到子組件的prop，在子組件監(jiān)聽(tīng)不到變化，

遂查看vue文檔，得知watch有一種深度監(jiān)聽(tīng)的方法。

閱讀vue文檔如下代碼。=》

var vm = new Vue({
? data: {
? ? a: 1,
? ? b: 2,
? ? c: 3,
? ? d: 4,
? ? e: {
? ? ? f: {
? ? ? ? g: 5
? ? ? }
? ? }
? },
? watch: {
? ? a: function (val, oldVal) {
? ? ? console.log('new: %s, old: %s', val, oldVal)
? ? },
? ? // 方法名
? ? b: 'someMethod',
? ? // 該回調(diào)會(huì)在任何被偵聽(tīng)的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
? ? c: {
? ? ? handler: function (val, oldVal) { /* ... */ },
? ? ? deep: true
? ? },
? ? // 該回調(diào)將會(huì)在偵聽(tīng)開(kāi)始之后被立即調(diào)用
? ? d: {
? ? ? handler: 'someMethod',
? ? ? immediate: true
? ? },
? ? // 你可以傳入回調(diào)數(shù)組，它們會(huì)被逐一調(diào)用
? ? e: [
? ? ? 'handle1',
? ? ? function handle2 (val, oldVal) { /* ... */ },
? ? ? {
? ? ? ? handler: function handle3 (val, oldVal) { /* ... */ },
? ? ? ? /* ... */
? ? ? }
? ? ],
? ? // watch vm.e.f's value: {g: 5}
? ? 'e.f': function (val, oldVal) { /* ... */ }
? }
})
vm.a = 2 // => new: 2, old: 1

這時(shí)就可以監(jiān)聽(tīng)到對(duì)象內(nèi)部的屬性變化了。

疑惑，項(xiàng)目中單層的對(duì)象，沒(méi)有嵌套的對(duì)象，居然也監(jiān)聽(tīng)不到變化。

踩坑的一天。

props監(jiān)聽(tīng)變化的幾種方式

應(yīng)用場(chǎng)景

在vue中父子組件是通過(guò)props傳遞數(shù)據(jù)的。通常有以下幾種場(chǎng)景：

• 子組件展示父組件傳遞過(guò)來(lái)的props，一般是字符串
• 子組件通過(guò)父組件的props計(jì)算得到某個(gè)值
• 子組件修改父組件傳遞過(guò)來(lái)的props

1.computed 計(jì)算屬性

使用場(chǎng)景：當(dāng)pros傳遞過(guò)來(lái)的值不能直接使用的時(shí)候，就可以使用計(jì)算屬性了。

比如：完整的地址需要將省市區(qū)3個(gè)字段拼接后展示。

計(jì)算屬性是基于依賴進(jìn)行緩存的，當(dāng)props不變時(shí)，多次訪問(wèn)addrese計(jì)算屬性，會(huì)立即返回結(jié)果，而不必再次執(zhí)行計(jì)算。

props: {
? province: String, // 省
? city: String, // 市
? area: String // 區(qū)
},
computed: {
? address(){
? ? return `${this.province}${this.city}${this.area}`
? }
}

2.methods 方法

上面計(jì)算屬性，通過(guò)methods也可以實(shí)現(xiàn)，但methods不會(huì)進(jìn)行緩存，而且methods通常用來(lái)處理業(yè)務(wù)邏輯。

3.watch 偵聽(tīng)器

使用場(chǎng)景：將傳遞過(guò)來(lái)的props作為初始值，比如城市選擇列表的默認(rèn)城市，我們希望選擇城市時(shí)，改變這個(gè)值。

單向數(shù)據(jù)流

父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中。

當(dāng)我們需要在子組件中修改父組件傳遞過(guò)來(lái)的props時(shí)，如果直接更改，vue會(huì)報(bào)錯(cuò)的，因?yàn)槿绻咏M件直接更改父組件的props，會(huì)使應(yīng)用的數(shù)據(jù)流向難以理解。

解決方案

為了不直接修改props的值，可以在data中，用props初始化一個(gè)data屬性，以后更改這個(gè)data屬性即可。

但是這會(huì)導(dǎo)致，父組件變化時(shí)，該data屬性不會(huì)更新(注意：只針對(duì)基本類(lèi)型，如果是引用類(lèi)型，仍舊是變化的。因?yàn)橐妙?lèi)型的內(nèi)存地址沒(méi)變)

此時(shí)為了更新這個(gè)data屬性，就需要使用偵聽(tīng)器來(lái)監(jiān)聽(tīng)props的變化。

深度監(jiān)聽(tīng)

使用場(chǎng)景：當(dāng)監(jiān)聽(tīng)到某個(gè)值變化后，執(zhí)行異步請(qǐng)求。

此時(shí)computed和methods都不太合適。

• 基本類(lèi)型

watch: {
? ?msg(newV,oldV) {
? ? ?// do something
? ? ?console.log(newV,oldV)
? ?}?
}

• 引用類(lèi)型

1.計(jì)算屬性(推薦)

先通過(guò)計(jì)算屬性得到引用類(lèi)型的內(nèi)部某個(gè)字段，再使用偵聽(tīng)器監(jiān)聽(tīng)該字段的變化

? props:{
? ? config:Object
? },
? computed: {
? ? ? isShow() {?
? ? ? ? ? return this.config.role.isShow
? ? ? }
? },
? watch: {
? ? ? isShow(newV,oldV) {
? ? ? ? ? // do something
? ? ? ? ? console.log(newV,oldV)
? ? ? }
? }

2.deep

?props:{
? ? config:Object
? },
? watch: {
? ? isShow:{ //深度監(jiān)聽(tīng)，可監(jiān)聽(tīng)到對(duì)象、數(shù)組的變化
? ? ? ? handler (newV, oldV) {
? ? ? ? ? // do something, 可使用this
? ? ? ? ? console.log(newV,oldV)
? ? ? ? },
? ? ? ? deep:true
? ? ? ?}
? },

監(jiān)聽(tīng)對(duì)象中的某個(gè)值

props:{
? ? option:Object
? },
? watch:{
? ? 'option.text'(newVal,oldVal){
? ? ? ? ? console.log(newVal,oldVal);
? ? }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論