一、數組

1、可以監聽到的情況

如push、splice、=賦值(array=[1,2,3])

2、無法監聽到的情況

使用下標修改某個元素(這種比較常見)

array[index] = 1

object.a = 3

直接修改數組length

array.length = 5

3、解決方案

this.$set(array, index, data) - 這是個深度的修改，某些情況下可能導致你不希望的結果，因此最好還是慎用

this.dataArr = this.originArr

this.$set(this.dataArr, 0, {data: '修改第一個元素'})

console.log(this.dataArr)

console.log(this.originArr) //同樣的 源數組也會被修改 在某些情況下會導致你不希望的結果

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

利用臨時變量進行中轉

let tempArr = [...this.targetArr]

tempArr[0] = {data: 'test'}

this.targetArr = tempArr

二、對象

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

1、可以監聽到的

對象的直接=賦值

this.obj = {name: 'test'}

2、無法監聽到的

對象屬性的增刪改

obj: {

prop1: 'data1',

prop2: 'data2'

}

...

// 增

this.obj.prop3 = 'data3'

// 刪

delete this.obj.prop1

// 改

this.obj.prop1 = 'data4'

3、解決辦法

this.$set(obj, key ,value) - 可實現增、改

watch時添加deep：true深度監聽，只能監聽到屬性值的變化，新增、刪除屬性無法監聽

this.$watch('blog', this.getCatalog, {

deep: true

// immediate: true // 是否第一次觸發

});

watch時直接監聽某個key

watch: {

'obj.name'(curVal, oldVal) {

// TODO

}

}

object.assign()+直接=賦值

this.watchObj = Object.assign({}, this.watchObj, {

name: 'xiaoyue',

age: 15,

});

補充知識：vue 監聽不到數組或對象值的變化怎么辦

一、vue監聽數組的變化

vue能購監聽到數組變化的場景

通過賦值的形式改變正在被監聽的數組；

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

通過數組的push的形式改變正在被監聽的數組。

vue無法監聽數組變化的場景

通過數組索引改變數組元素的值；

改變數組的長度；

vue無法監聽數組變化的場景

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

通過splice(index，num，val)；

使用臨時變量作為中轉，重新賦值數組；

二、vue監聽對象的變化

vue能夠監聽到對象變化的場景

通過直接賦值的場景。

eg：watchObj = {name:“zyk”}

vue無法監聽到對象變化的場景

對象的增加、刪除、修改無法被vue監聽到

vue解決無法監聽對象變化的方法

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

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

以上這篇解決vue無法偵聽數組及對象屬性的變化問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。