Vue不能监听到数组和对象值的变化其实和双向绑定的原理有关。Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法，而同时这种方法存在着缺陷。就是只能监听到对象内已有的值。在监听对象中属性变化的方法中中，无疑是使用ES6的proxy更为优越。

**总结：
如果操作对象是数组，改变数组的值用Vue的

s

e

t

方法，改变数组的长度用数组的

s

p

l

i

c

e

方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值，使用

set方法， 改变数组的长度用数组的splice方法使数组变化变成可监听的。 如果操作对象是对象。 如果操作的属性是对象内已经有的值，使用

set方法，改变数组的长度用数组的splice方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值，使用watch,加上关键字deep深度监听对象，
如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听的！
**

链接: https://blog.csdn.net/qq_38280242/article/details/102807862

一、利用索引直接改变arr的值

//普通监听
watch:{
    arr:function (newValue,oldValue) {
         console.log('arr改变了')
     },
}
// this.arr=[1,2,3,4]
this.arr[0]=100  //watch监听不到数组变化
this.$set(this.arr,0,1234) //能监听到数据

二、修改数组的长度arr.length

//普通监听
watch:{
    arr:function (newValue,oldValue) {
         console.log('arr改变了')
     },
}
// this.arr=[1,2,3,4]
this.arr.length=2   //watch监听不到数组变化
this.arr.splice(0,2)   //能监听到数据

三、添加和修改对象属性和值

//普通监听
watch:{
   obj:{
      handel:function (newValue,oldValue) {
          console.log('obj改变了')
      },
      deep:true
}
// obj:{   name:'wxs',
//          age:21   }
obj.name='xxx'   //watch监听不到数组变化要加上deep:true
this.$set(this.obj,'major','Vue')   //能监听到数据

链接: https://betheme.net/news/txtlist_i64894v.html?action=onClick