vue-watch监听功能(侦听器)详解&使用

在Vue中,watch侦听器允许我们观察和响应Vue实例上数据的变化。当被侦听的数据发生变化时,可以执行异步操作或开销较大的操作,这是computed属性可能不适合的场景。watch侦听器提供了更灵活的方式来处理数据变化时的副作用。

基本用法

watch选项是一个对象,其键是需要观察的表达式(字符串形式),值是对应回调函数。当表达式的值发生变化时,会调用这个回调函数。回调函数接收两个参数:新值和旧值。

复制代码

javascript复制代码

|---|--------------------------------------------------------------------|
| | export default { |
| | data() { |
| | return { |
| | question: '', |
| | answer: 'I cannot give you an answer until you ask a question!' |
| | } |
| | }, |
| | watch: { |
| | // 侦听question的变化 |
| | question(newVal, oldVal) { |
| | this.answer = 'Waiting for you to stop typing...'; |
| | this.debouncedGetAnswer(); |
| | } |
| | }, |
| | created() { |
| | // 使用lodash的debounce函数来限制getAnswer的调用频率 |
| | this.debouncedGetAnswer = _.debounce(this.getAnswer, 500); |
| | }, |
| | methods: { |
| | getAnswer() { |
| | if (this.question.includes('?')) { |
| | this.answer = 'Thinking...'; |
| | // 这里模拟异步操作 |
| | setTimeout(() => { |
| | this.answer = 'Answered ' + this.question; |
| | }, 1000); |
| | } |
| | } |
| | } |
| | } |

深度侦听

当需要侦听一个对象的属性时,标准的watch侦听器可能不会按预期工作,因为默认情况下,它不会侦听对象内部属性的变化。为了侦听对象内部属性的变化,可以使用deep: true选项。

复制代码

javascript复制代码

|---|------------------------------|
| | watch: { |
| | someObject: { |
| | handler(newVal, oldVal) { |
| | // 当someObject内部任何属性变化时执行 |
| | }, |
| | deep: true |
| | } |
| | } |

立即执行

有时,你可能希望侦听器在组件创建后立即执行一次,而不是等待数据变化。这可以通过immediate: true选项来实现。

复制代码

javascript复制代码

|---|-----------------------------------|
| | watch: { |
| | someData: { |
| | handler(newVal, oldVal) { |
| | // 侦听逻辑 |
| | }, |
| | immediate: true // 组件创建时立即执行一次 |
| | } |
| | } |

注意事项

  • watch侦听器适用于观察数据变化后执行复杂逻辑或异步操作。
  • 过度使用watch可能会使组件难以理解和维护,特别是在大型项目中。
  • 当需要基于数据变化来更新数据时,通常优先考虑使用computed属性,因为它更高效且声明式。
  • 使用deep: true时要小心,因为它会深度遍历对象,这可能会导致性能问题。
  • immediate: true在某些情况下很有用,但也要谨慎使用,因为它会在侦听器创建后立即执行一次,这可能会与组件的初始渲染逻辑冲突。
相关推荐
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way2 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒