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

相关推荐
芝士麻雀1 分钟前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
Dontla7 分钟前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
fruge14 分钟前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux
ZYMFZ20 分钟前
Redis主从复制与哨兵集群
前端·git·github
lumi.23 分钟前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
旧雨散尘27 分钟前
【react】初学react5-react脚手架搭建中的小众知识
前端·react.js·前端框架
炫饭第一名38 分钟前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴39 分钟前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua
奇舞精选40 分钟前
一文了解 Server-Sent Events (SSE):构建高效的服务器推送应用
前端
Yeats_Liao1 小时前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang