vue無法偵聽數(shù)組及對象屬性怎么辦

這篇文章主要為大家展示了vue無法偵聽數(shù)組及對象屬性怎么辦，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

一、數(shù)組

1、可以監(jiān)聽到的情況

如push、splice、=賦值（array=[1,2,3]）

2、無法監(jiān)聽到的情況

使用下標(biāo)修改某個元素（這種比較常見）

array[index] = 1

object.a = 3

直接修改數(shù)組length

array.length = 5

3、解決方案

this.$set(array, index, data) - 這是個深度的修改，某些情況下可能導(dǎo)致你不希望的結(jié)果，因此最好還是慎用
this.dataArr = this.originArr
this.$set(this.dataArr, 0, {data: '修改第一個元素'})
console.log(this.dataArr)    
console.log(this.originArr)    //同樣的 源數(shù)組也會被修改 在某些情況下會導(dǎo)致你不希望的結(jié)果

上面提到的splice方法進行增刪改

利用臨時變量進行中轉(zhuǎn)

let tempArr = [...this.targetArr]
tempArr[0] = {data: 'test'}
this.targetArr = tempArr

二、對象

對象和數(shù)組都是js里的引用類型，在實際存儲中，數(shù)據(jù)是存儲在堆中的，利用存儲在棧里的對象名或者數(shù)組名的指針進行索引，因此也存在在淺拷貝和深拷貝以及等號賦值時，到底是僅僅新建了一個指針指向了同一份數(shù)據(jù)，還是兩個指針分別指向了兩份完全一樣的數(shù)據(jù)的問題

1、可以監(jiān)聽到的

對象的直接=賦值

this.obj = {name: 'test'}

2、無法監(jiān)聽到的

對象屬性的增刪改

obj: {
  prop1: 'data1',
  prop2: 'data2'
}
...
// 增
this.obj.prop3 = 'data3'
// 刪
delete this.obj.prop1
// 改
this.obj.prop1 = 'data4'

3、解決辦法

this.$set(obj, key ,value) - 可實現(xiàn)增、改
watch時添加deep：true深度監(jiān)聽，只能監(jiān)聽到屬性值的變化，新增、刪除屬性無法監(jiān)聽
this.$watch('blog', this.getCatalog, {
  deep: true
  // immediate: true // 是否第一次觸發(fā)
 });
watch時直接監(jiān)聽某個key
watch: {
 'obj.name'(curVal, oldVal) {
  // TODO
 }
}
object.assign()+直接=賦值
this.watchObj = Object.assign({}, this.watchObj, {
 name: 'xiaoyue',
 age: 15,
});

補充知識：vue 監(jiān)聽不到數(shù)組或?qū)ο笾档淖兓趺崔k

一、vue監(jiān)聽數(shù)組的變化

vue能購監(jiān)聽到數(shù)組變化的場景

通過賦值的形式改變正在被監(jiān)聽的數(shù)組；

通過splice(index, num, val) 的形式改變正在被監(jiān)聽的數(shù)組;

通過數(shù)組的push的形式改變正在被監(jiān)聽的數(shù)組。

vue無法監(jiān)聽數(shù)組變化的場景

通過數(shù)組索引改變數(shù)組元素的值；

改變數(shù)組的長度；

vue無法監(jiān)聽數(shù)組變化的場景

this.$set(arr, index, newVal);

通過splice（index，num，val）；

使用臨時變量作為中轉(zhuǎn)，重新賦值數(shù)組；

二、vue監(jiān)聽對象的變化

vue能夠監(jiān)聽到對象變化的場景

通過直接賦值的場景。

eg：watchObj = {name:“zyk”}

vue無法監(jiān)聽到對象變化的場景

對象的增加、刪除、修改無法被vue監(jiān)聽到

vue解決無法監(jiān)聽對象變化的方法

使用 this.$set(object, key, value)（vue 無法監(jiān)聽 this.set 修改原有屬性）

使用Object.assign()，直接賦值的原理；（推薦使用）

以上就是關(guān)于vue無法偵聽數(shù)組及對象屬性怎么辦的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。