【Vue | 补洞 | 12】使用 $watch 实现灵活监听

最新推荐文章于 2024-09-09 19:36:19 发布

波吉

最新推荐文章于 2024-09-09 19:36:19 发布

阅读量694

点赞数

分类专栏： Vue补洞前端文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/weixin_42678675/article/details/123651295

版权

71 篇文章

订阅专栏

22 篇文章

订阅专栏

本文深入探讨Vue的$watch API，揭示其在复杂业务场景中的灵活性，包括函数和对象写法，以及如何通过配置实现初始化时的立即执行。同时，讲解了动态监听值的方法，避免了初始化时对不存在值的错误监听，减少了不必要的内存消耗。通过实例展示了$watch的高效使用策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$watch 实现灵活配置 watch 的时机，满足业务逻辑复杂的监听场景！

欢迎持续关注新系列文章 [Vue 补洞] 系列，用久了 Vue2 总有一些遗漏的知识点，一起通过该系列文章一起查漏补缺！

通过 API 的方式调用 $watch 实现监听，可以灵活在复杂业务中监听特定的值

1）配置项写法

watch: {
    arg(newValue, oldValue) {
        ...
    }
}

watch: {
  arg: {
    handler(newVal, oldVal) {
    	...
    }
  }
}

watch: {
  arg: {
    handler(newVal, oldVal) {
      ...
    },
    immediate: true // 在初始化的时候立即执行，oldVal 第一次为 undefined
  }
}

2）API 写法 $watch

注意 监听的值需要用字符串形式

假设 arg 参数是通过某些业务逻辑后才产生的变量，则可通过该方式来监听，无需在初始化时就配置监听

优点

避免初始化时监听一个不存在的值而报错
减少不必要的依赖监听次数，降低内存消耗

this.$watch('arg', {
    handler (newVal, oldVal) {
       console.log(newVal, oldVal)
    }
})