👂《侦听器(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 核心系列内容!
相关推荐
余防20 分钟前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump20 分钟前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅1 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士1 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing1 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea2 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~2 小时前
CSS——重排和重绘
前端
奶糖 肥晨2 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法3 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
belldeep3 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django