深入剖析 Vue 深度监听新旧值相同时的前因后果与解决之道

在 Vue 中，我们经常使用 watch API 来监听响应式数据的变化。当被监听的数据发生变化时，watch 回调函数就会被触发。然而，在某些情况下，您可能会发现，即使被监听的数据确实发生了变化，但 watch 回调函数却并没有被触发。出现这种情况的原因是，Vue 默认情况下并不对数组和对象进行深度监听。这意味着，如果数组或对象中的某个元素发生了变化，但数组或对象本身没有发生变化，那么 watch 回调函数就不会被触发。

对于使用Vue的人员来说，当在Vue中使用watchAPI进行监视时，可能会发现监听到的新旧值是相同的。这个问题的原因就在于Vue默认并不提供对数组和对象的深度监视。这意味，当对一个数组或对象的元素进行更改时，但整个数组或对象本身并未发生变化时，观察将不会被触发。

因此，如果您需要对数组或对象进行深度监听，则需要使用 Vue.set() 方法显式地通知 Vue，您已经对数组或对象进行了更改。Vue.set() 方法可以用来将一个新值设置到数组或对象中，并会触发 watch 回调函数。

除了使用 Vue.set() 方法之外，您还可以使用第三方的库来实现 Vue 的深度监听。例如，您可以使用 vue-deep-watch 库来轻松实现 Vue 的深度监听。vue-deep-watch 库是一个非常轻量级的库，它不会对 Vue 的性能产生任何影响。

下面是一个使用 Vue.set() 方法实现 Vue 深度监听的示例：

const data = {
  array: [1, 2, 3],
  object: {
    a: 1,
    b: 2,
  },
};

const vm = new Vue({
  data,
  watch: {
    'array': {
      handler(newVal, oldVal) {
        console.log('Array changed:', newVal, oldVal);
      },
      deep: true,
    },
    'object': {
      handler(newVal, oldVal) {
        console.log('Object changed:', newVal, oldVal);
      },
      deep: true,
    },
  },
});

vm.array[0] = 4;
vm.object.a = 3;

在这个示例中，我们使用 watch API 来监听 data 对象中 array 和 object 的变化。我们还使用了 deep 选项来显式地告诉 Vue，我们需要对 array 和 object 进行深度监听。当我们更改 array[0] 和 object.a 的值时，watch 回调函数就会被触发，并且我们会看到控制台输出的变化。

希望本文对您有所帮助。如果您还有任何问题，请随时留言。