解决vue无法侦听数组及对象属性的变化问题

下面是解决Vue无法侦听数组及对象属性的变化问题的完整攻略：

背景

在Vue中，我们可以使用vue实例上提供的$watch方法来监测数据变化，在数据变化时做出相应的处理。但是，在Vue中我们使用$watch时，会发现无法侦听到对象或者数组的变化。这是因为Vue只能侦听属性的变化，而对于数组的操作，我们可以使用Vue提供的$set方法来实现。

解决方案

监听对象属性变化的方法

对于一个对象属性的变化，我们可以使用Vue提供的$watch方法来进行侦听。示例代码如下：

// 定义一个对象
let obj = {
  name: 'vue'
}

// 创建一个Vue实例
let vm = new Vue({
  data: obj
})

// 监听对象属性变化
vm.$watch('name', (newVal, oldVal) => {
  console.log(`newVal: ${newVal}, oldVal: ${oldVal}`)
})

// 修改对象属性的值
obj.name = 'React'

执行上面的代码，会输出newVal: React, oldVal: vue。这说明对象属性的变化成功被侦听到了。

监听数组操作的方法

使用变异方法

对于数组的变化，我们可以使用Vue提供的数组变异方法来进行操作，从而实现对数组变化的侦听。数组变异方法包括：

方法名	作用
push()	向数组末尾添加元素
pop()	从数组尾部删除元素
shift()	从数组头部删除元素
unshift()	向数组头部添加元素
splice()	从指定位置添加或删除元素
sort()	对数组进行排序
reverse()	对数组进行反转

示例代码如下：

// 定义一个数组
let arr = ['vue', 'angular']

// 创建一个Vue实例
let vm = new Vue({
  data: {
    arr
  }
})

// 监听数组的变化
vm.$watch('arr', (newVal, oldVal) => {
  console.log(`newVal: ${newVal}, oldVal: ${oldVal}`)
}, {
  deep: true,
  immediate: true
})

// 修改数组的值
arr.push('React')

在上面的代码中，我们使用了deep和immediate这两个选项，deep表示深度侦听，即侦听整个对象的变化，而不仅仅是对象的属性变化；immediate表示是否在侦听开始前先调用一次监听器，在我们的示例代码中，为了能够侦听到数组初始值，因此我们需要使用这个选项。

使用$set方法

在使用数组变异方法操作数组时，我们需要特别注意，因为Vue并不是通过侦听数组本身变化来实现对数组变化的侦听的，而是通过侦听数组元素的变化来实现的。因此，如果我们使用arr[index] = newVal这样的方式改变了数组元素的值，并且数组的长度未发生变化时，Vue就无法侦听到对数组元素的变化。

为了解决这个问题，Vue提供了一个$set方法，用于实现对任何已有对象的属性添加响应式属性的能力。因为使用$set方法添加的属性是响应式的，所以再对数组元素进行修改时就能够被Vue侦听到。示例代码如下：

// 定义一个数组
let arr = ['vue', 'angular']

// 创建一个Vue实例
let vm = new Vue({
  data: {
    arr
  }
})

// 监听数组的变化
vm.$watch('arr', (newVal, oldVal) => {
  console.log(`newVal: ${newVal}, oldVal: ${oldVal}`)
}, {
  deep: true
})

// 修改数组的值，使用$set
Vue.set(arr, 2, 'React')

在上面的代码中，我们使用了Vue.set(arr, 2, 'React')这样的方式来修改数组元素的值，因此对数组元素的修改就能够被Vue侦听到。