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

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

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

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

javascript 复制代码
<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 选项可以监听对象内部属性的变化,而直接监听特定属性则仅关注该属性的变化。

相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼7 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙8 小时前
[译] Composition in CSS
前端·css
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix8 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278008 小时前
new、原型和原型链浅析
前端·javascript