Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解

让我来详细讲解“Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解”的完整攻略。

什么是Vue Watch？

首先，Vue Watch 是 Vue.js 的一个非常重要的API。它用于监听数据的变化，以便在数据变化时更改视图或执行其他操作。可以使用 Watch 来监听单个属性或整个对象。当监听到数据变化时，Watch 会自动触发回调函数。

问题背景

但是，有时 Watch 不能完全监听到数组或对象的值的更改，这就需要我们在项目中进行注意。

Vue Watch 不能监听到数组或对象值的改变的原因

Vue Watch 的缺陷之一是无法监听对象或数组内部值的变化。具体来说，如果你在 Watch 中监听一个对象或数组，则只有当该对象或数组的引用发生更改时才会触发 Watch。

例如，如果你有一个对象：

data: {
  person: {
    name: 'Tom',
    age: 30,
  }
}

那么，如果你在 Watch 中监听 data.person，不会在 person 对象的属性值发生更改时得到通知。相反，只有当 person 对象的引用变化时 Watch 才会被触发。

也就是说，下面这个例子是不会生效的：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed')
    },
    deep: true
  }
}

所以，当我们需要监听到数组或对象内部值的变化时，就需要使用 Vue 提供的深度监听选项 deep。

深度监听选项 `deep`

我们可以在 Watch 中添加一个 deep 选项来启用深度监听。如下所示：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed')
    },
    deep: true
  }
}

现在，当 person 对象属性的值更改时，Watch 将得到通知。

示例说明

让我们通过两个示例来进一步了解深度监听选项 deep 的使用。

示例1：监听数组内部值的变化

data() {
  return {
    list: ['a', 'b', 'c']
  }
},
watch: {
  list: {
    handler(newVal, oldVal) {
      console.log('list changed')
    },
    deep: true
  }
}

在此示例中，当列表 list 中的值发生变化（例如：添加、移除或更新），Watch 将得到通知。

示例2：监听对象内部值的变化

data() {
  return {
    person: {
      name: 'Tom',
      age: 30,
    }
  }
},
watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed')
    },
    deep: true
  }
}

在此示例中，当 person 对象中的属性 name 或 age 发生更改时，Watch 将得到通知。