Vue不能watch数组和对象变化解决方案

Vue中的watch属性用于监控变量的变化并执行相应的操作，但是Vue默认不能直接监控数组和对象的变化。如果要监控数组和对象的变化需要使用特定的解决方案。

问题分析

Vue默认不支持watch数组和对象的变化是因为Vue实现了一个高效的响应式系统，它利用了ES6的Proxy特性来实现对数据的监控。但是Proxy不支持ie11以下的浏览器，因此对于不支持ES6的浏览器，Vue会选择使用Object.defineProperty进行监控。
Object.defineProperty只能对已存在的属性进行监控，并且无法监控数组的变化。因此如果需要对数组和对象进行监控，需要使用Vue提供的一些解决方案。

解决方案

1. 使用$set方法

可以通过使用Vue提供的$set方法对数组和对象进行监控。$set方法是Vue专门为了解决数据变化不能被响应的问题所提供的方法。$set方法的使用方式为，在需要改变数组或对象的值的位置使用$set方法进行改变。

// 示例1：改变数组中的值
Vue.set(this.myArray, 1, 'newValue');

// 示例2：改变对象中的值
Vue.set(this.myObject, 'key', 'newValue');

2. 使用$watch

还可以使用Vue的$watch方法对数组和对象进行监控。需要注意的是，在使用$watch方法监控数组或者对象的时候需要使用deep选项。deep选项表示是否深度监控数组或者对象，如果为true，则会监控数组或对象中所有可监控的属性的变化。

// 示例1：监控数组中所有值的变化
vm.$watch('myArray', function (newVal, oldVal) {
  console.log('myArray changed')
}, { deep: true })

// 示例2：监控对象中所有值的变化
vm.$watch('myObject', function (newVal, oldVal) {
  console.log('myObject changed')
}, { deep: true })

结论

因此，在Vue中监控数组和对象的变化有两种解决方案：

• 使用Vue提供的$set方法，对数组和对象的值的位置进行修改。
• 使用Vue的$watch方法，使用deep选项来监控数组和对象中所有可监控的属性的变化。