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

相关推荐
岁月宁静7 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby7 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒7 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯7 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v57 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
可爱的秋秋啊8 小时前
简单网站编写
开发语言·前端
Keepreal4968 小时前
Electron基本概念
前端·javascript·electron
zhaoolee8 小时前
Claude Code使用指北(如何白嫖百万Qwen3 Token,每月劲省20刀)
前端
前台端水工程师8 小时前
vite-plugin-mock插件的3.0.2版本在生产环境无法使用
前端
戈卬8 小时前
VSCode 中 Prettier 工作原理与使用指南
前端