vue2使用watch监听对象变化不起作用

在使用 Vue 2 的过程中，watch 监听对象的变化是一个非常常用的功能。然而，很多开发者在使用 watch 监听对象时会遇到一些问题，比如监听对象变化不起作用。本文将深入探讨这一问题，并提供解决方案及代码示例。

Vue 的响应式原理

Vue 的响应式系统是通过 Object.defineProperty() 实现的，它能够在数据变化时自动更新视图。但需要注意的是，当你只有简单的属性变化时，响应式系统是能有效工作的。但是，当监听的对象有深层嵌套时，事情就会变得复杂。

使用 watch 监听对象变化

在 Vue 2 中，watch 选项可以用来监听数据的变化，下面的代码展示了基本的用法：

new Vue({
  el: '#app',
  data: {
    user: {
      name: '张三',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user 对象已变化:', newVal);
      },
      deep: true // 设置为 true，监听对象内部的变化
    }
  }
});

在上述示例中，我们通过将 deep 属性设置为 true 来确保无论对象 user 内部的哪些属性发生变化，watch 都能触发。

常见问题及解决方案

问题一：未正确使用 deep 选项

如果没有将 deep 选项设置为 true，那么只监听对象本身的引用变化，而不会捕获其内部属性的变化。因此，当我们直接修改对象的内部属性时，watch 将不会触发。

// 这种情况下 watch 可能不会触发
this.user.name = '李四'; // 不会触发 watcher

解决方案就是确保为 watch 的监听选项添加 deep: true。

问题二：Vue.set 方法

在 Vue 中，如果你直接向对象添加新的属性，Vue 也无法监听到这个变化。这是因为 Vue 只能监听已存在的属性变化。解决这个问题可以使用 Vue.set() 方法。

// 使用 Vue.set 方法添加新的属性
Vue.set(this.user, 'email', 'example@example.com'); // 现在可以监听到变化

问题三：对象被替换

如果你将整个对象替换为一个新对象，而不是修改其内部属性，那么 watch 也不会触发。这里有两种解决方案：

1. 在替换时使用 this.$set()，以确保 Vue 能够追踪到这一变化。
2. 如果属性是深层嵌套的，确保前面的 deep: true 选项是激活的。

综合示例

<div id="app">
  <h1>{{ user.name }}</h1>
  <button @click="changeName">修改姓名</button>
  <button @click="addEmail">添加邮箱</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    user: {
      name: '张三',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user 对象已变化:', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeName() {
      this.user.name = '李四';  // 会触发 watcher
    },
    addEmail() {
      // 使用 Vue.set 添加新属性
      Vue.set(this.user, 'email', 'example@example.com'); // 会触发 watcher
    }
  }
});
</script>

总结

在使用 Vue 2 的 watch 时，监听对象的变化确实可能会出现一些不如预期的情况。只需确保正确使用 deep 选项和 Vue.set 方法，就能有效解决这些问题。通过这篇文章的讲解，相信你对 watch 监听对象变化的机制有了更深的理解，并能够在实际开发中灵活运用。