一、陣列

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,{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,newVal);

通過splice（index，num，val）；

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

二、vue監聽物件的變化

vue能夠監聽到物件變化的場景

通過直接賦值的場景。

eg：watchObj = {name:“zyk”}

vue無法監聽到物件變化的場景

物件的增加、刪除、修改無法被vue監聽到

vue解決無法監聽物件變化的方法

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

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

以上這篇解決vue無法偵聽陣列及物件屬性的變化問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。