vue2中在组件内部通过this.$watch监听数据变化总结

在 Vue 2 中，除了在组件的 watch 选项中定义观察者，你还可以在组件内部通过 this.$watch 方法来动态地观察数据的变化。这种方式允许你在运行时添加观察者，非常适合需要根据某些条件动态调整监听的场景。

使用 this.$watch 监听对象属性变化

下面是一个示例，展示如何通过 this.$watch 来监听对象属性的变化：

<div id="app">
  <div>
    <label for="a">A:</label>
    <input v-model="myObject.a" id="a">
  </div>
  <div>
    <label for="b">B:</label>
    <input v-model="myObject.b" id="b">
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data: {
    myObject: {
      a: 1,
      b: 2
    }
  },
  mounted() {
    // 监听整个对象
    this.$watch('myObject', (newVal, oldVal) => {
      console.log('myObject changed:', newVal, oldVal);
    }, { deep: true });

    // 监听对象的特定属性
    this.$watch('myObject.a', (newVal, oldVal) => {
      console.log('myObject.a changed:', newVal, oldVal);
    });

    this.$watch('myObject.b', (newVal, oldVal) => {
      console.log('myObject.b changed:', newVal, oldVal);
    });
  }
});
</script>

代码解析

1. this.$watch 方法：

   • this.$watch 是 Vue 实例的方法，用于观察 Vue 实例的数据变化。
   • 第一个参数是要观察的表达式，可以是数据属性的路径。
   • 第二个参数是回调函数，当被观察的值变化时会调用这个函数，传入新的值和旧的值。
   • 第三个参数是一个可选的配置对象，可以设置 deep: true 以进行深度观察。

2. 在 mounted 钩子中使用：

   • 在组件的 mounted 生命周期钩子中使用 this.$watch，确保在组件实例已经被创建并且数据已经设置完毕后开始监听。

总结

通过 this.$watch，你可以动态地在 Vue 组件中添加对数据的观察。这种方式特别适合于在某些条件下需要添加或移除观察者的场景。使用 deep: true 选项可以监听对象内部属性的变化，而直接监听特定属性则仅关注该属性的变化。