👂《侦听器(watch)》— 监听数据变化执行副作用逻辑

在 Vue 中,有时你不仅仅是想让 "数据驱动视图",你还可能想:

  • 数据变了,发一个请求
  • 数据变了,写一条日志
  • 数据变了,更新 localStorage 或调用浏览器 API...

这时候,你就可以使用 watch ------ Vue 提供的"观察者"函数。


🛠 什么是watch?

watch() 用于观察响应式数据的变化,并在变化时执行回调函数

它可以理解为是:

✅ 一个"数据监听器",而不是"模板驱动者"。


✅ 用法一:监听一个ref(最常见)

js 复制代码
<script setup> import { ref, watch } from 'vue' // 响应式数据 

const count = ref(0) // 用于显示日志信息的 ref

const log = ref('初始值:0') // 监听 count 的变化 

watch(count, (newVal, oldVal) => { log.value = `count 从 ${oldVal} 变成了 ${newVal}` }) 

</script>

<template>
<div>
<p>当前 count 值:{{ count }}</p>
<button @click="count++">点击增加 count</button> 
</div> 

<div> 
<p>监听日志:</p> 
<p style="color: green;">{{ log }}</p>
</div>
</template>

🧠 解释:

  • count 是一个 ref,Vue 会追踪它;
  • 每次 count.value 变化,回调就执行;
  • 参数顺序是:(新值, 旧值),可以用来比较或触发操作。

✅ 用法二:监听一个 getter 函数(推荐监听对象的属性)

js 复制代码
const user = ref({ name: '90后晨仔' })

watch(
  () => user.value.name,  // 使用 getter 精确侦听某个属性
  (newName, oldName) => {
    console.log(`用户名从 ${oldName} 改成了 ${newName}`)
  }
)

🔍 为什么不直接监听user?

如果直接监听整个对象:

js 复制代码
watch(user, () => { ... })

那么 Vue 只知道"对象变了",不确定哪个字段变了

而用 getter 明确指定 user.value.name,可以更精确、更高性能地侦听。


✅ 用法三:高级选项(立即执行 & 深度监听)

javascript 复制代码
watch(user, (newVal) => {
  console.log('用户对象发生了变化', newVal)
}, {
  immediate: true, // 初始化就触发一次
  deep: true       // 深度监听内部属性变化
})

🧠 配置项详解:

  • immediate: true:第一次绑定就执行(不等数据变化);

  • deep: true:深度递归追踪对象的所有属性(适合监听嵌套对象)。

⚠️ 注意:deep 监听性能开销较大,推荐配合精确 getter 使用


🧩 watch 与 computed 有什么区别?

对比点 watch computed
是否缓存 ❌ 不缓存,每次变化都触发 ✅ 有缓存,依赖不变不重新计算
是否返回值 ❌ 没有返回值,主要执行副作用 ✅ 返回值,可直接绑定到模板
用途 监听变化 + 副作用(请求、写缓存等) 派生状态 + 模板展示

✅ 结论:

  • computed 用来"声明派生数据",更适合模板展示;
  • watch 用来"响应变化执行操作",更适合副作用处理。

🧠 使用场景总结:

场景 推荐用法
请求接口(数据变化时) ✅ watch
打印日志 / 调试变化 ✅ watch
操作浏览器 API(如 localStorage) ✅ watch
定义 UI 展示数据 ❌ 用 computed 更合适

📦 示例源码仓库

你可以在我的 GitHub 仓库中查看完整 Vue3 响应式示例代码,包括 ref、computed 和 watch 的实践演示:

👉学习demo


❤️ 如果你觉得有帮助:

  • 点个赞 👍 让我知道你看见了~
  • 收藏 📌 随时查阅不怕忘~
  • 评论 💬 说说你对 watch 的理解 or 疑惑~
  • 关注 🔔 持续更新 Vue3 核心系列内容!
相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip7 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel7 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休8 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选8 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选8 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼8 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——8 小时前
前端登录鉴权详解
前端·javascript