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

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

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

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

  

    A:
    
  
  

    B:
    
  

代码解析

1. this.$watch 方法：

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

2. 在 mounted 钩子中使用：

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

总结

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