1. 侦听器的基本用法
侦听器（watch）是Vue 3中用于响应式跟踪数据源变化 的核心API，它允许你在响应式数据改变时执行自定义副作用（如发请求、更新DOM、日志记录等）。其核心逻辑是：明确指定要监听的"源"，并定义"变化时的回调"。
1.1 监听单个ref源
ref是Vue 3中最基础的响应式包装器，监听ref的语法非常直观------直接将ref对象作为watch的第一个参数：
vue
复制代码
关键说明：
watch的第一个参数是监听源 （这里是count）；
第二个参数是变化回调 ，接收两个参数：newValue（变化后的值）、oldValue（变化前的值）；
点击按钮时，count变化会触发回调，修改页面标题。
1.2 监听reactive对象的属性
对于reactive创建的响应式对象，不能直接监听整个对象的属性 （会丢失响应式跟踪），需要用getter函数返回要监听的属性：
vue
复制代码
为什么要用getter？
reactive对象的属性是"响应式代理"，直接写user.name会返回原始值，无法被watch跟踪。getter函数会让Vue感知到"这个属性需要被跟踪"。
1.3 监听多个源
watch支持同时监听多个响应式源，只需将源包装成数组即可。回调函数的参数会对应数组的新值和旧值：
vue
复制代码
2. 侦听器的高级选项
watch还支持通过选项对象 （第三个参数）配置更灵活的行为，常见选项有deep（深度监听）、immediate（立即执行）。
2.1 深度监听（deep: true）
当监听的源是嵌套对象 时，默认情况下watch只会跟踪"对象引用"的变化，不会跟踪"嵌套属性"的变化。需要开启deep: true来监听嵌套属性：
vue
复制代码
注意：深度监听会遍历对象的所有嵌套属性，性能开销较大，尽量只在必要时使用（比如确实需要跟踪嵌套变化）。
2.2 立即执行（immediate: true）
默认情况下，watch只会在源第一次变化时 执行回调。如果需要初始挂载时就执行一次 （比如初始化时拉取数据），可以加immediate: true：
vue
复制代码
应用场景：初始化时根据默认值加载数据（比如搜索页的默认关键词）。
3. watch vs watchEffect：核心差异与选择
往期文章归档
Vue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗 - cmdragon's Blog
Vue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗 - cmdragon's Blog
为什么Vue 3需要ref函数？它的响应式原理与正确用法是什么？ - cmdragon's Blog
Vue 3中reactive函数如何通过Proxy实现响应式？使用时要避开哪些误区？ - cmdragon's Blog
Vue3响应式系统的底层原理与实践要点你真的懂吗？ - cmdragon's Blog
Vue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越 - cmdragon's Blog
快速入门Vue模板引用：从收DOM"快递"到调子组件方法，你玩明白了吗？ - cmdragon's Blog
快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？ - cmdragon's Blog
快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？ - cmdragon's Blog
快速入门Vue3事件处理的挑战题：v-on、修饰符、自定义事件你能通关吗？ - cmdragon's Blog
快速入门Vue3的v-指令：数据和DOM的"翻译官"到底有多少本事？ - cmdragon's Blog
快速入门Vue3，插值、动态绑定和避坑技巧你都搞懂了吗？ - cmdragon's Blog
想让PostgreSQL快到飞起？先找健康密码还是先换引擎？ - cmdragon's Blog
想让PostgreSQL查询快到飞起？分区表、物化视图、并行查询这三招灵不灵？ - cmdragon's Blog
子查询总拖慢查询？把它变成连接就能解决？ - cmdragon's Blog
PostgreSQL全表扫描慢到崩溃？建索引+改查询+更统计信息三招能破？ - cmdragon's Blog
复杂查询总拖后腿？PostgreSQL多列索引+覆盖索引的神仙技巧你get没？ - cmdragon's Blog
只给表子集建索引？用函数结果建索引？PostgreSQL这俩操作凭啥能省空间又加速？ - cmdragon's Blog
B-tree索引像字典查词一样工作？那哪些数据库查询它能加速，哪些不能？ - cmdragon's Blog
想抓PostgreSQL里的慢SQL？pg_stat_statements基础黑匣子和pg_stat_monitor时间窗，谁能帮你更准揪出性能小偷？ - cmdragon's Blog
PostgreSQL的"时光机"MVCC和锁机制是怎么搞定高并发的？ - cmdragon's Blog
PostgreSQL性能暴涨的关键？内存IO并发参数居然要这么设置？ - cmdragon's Blog
大表查询慢到翻遍整个书架？PostgreSQL分区表教你怎么"分类"才高效
PostgreSQL 查询慢？是不是忘了优化 GROUP BY、ORDER BY 和窗口函数？ - cmdragon's Blog
PostgreSQL里的子查询和CTE居然在性能上"掐架"？到底该站哪边？ - cmdragon's Blog
PostgreSQL选Join策略有啥小九九？Nested Loop/Merge/Hash谁是它的菜？ - cmdragon's Blog
PostgreSQL新手SQL总翻车？这7个性能陷阱你踩过没？ - cmdragon's Blog
PostgreSQL索引选B-Tree还是GiST？"瑞士军刀"和"多面手"的差别你居然还不知道？ - cmdragon's Blog
想知道数据库怎么给查询"算成本选路线"？EXPLAIN能帮你看明白？ - cmdragon's Blog
PostgreSQL处理SQL居然像做蛋糕？解析到执行的4步里藏着多少查询优化的小心机？ - cmdragon's Blog
PostgreSQL备份不是复制文件？物理vs逻辑咋选？误删还能精准恢复到1分钟前？ - cmdragon's Blog
转账不翻车、并发不干扰，PostgreSQL的ACID特性到底有啥魔法？ - cmdragon's Blog
银行转账不白扣钱、电商下单不超卖，PostgreSQL事务的诀窍是啥？ - cmdragon's Blog
PostgreSQL里的PL/pgSQL到底是啥？能让SQL从"说目标"变"讲步骤"？ - cmdragon's Blog
PostgreSQL视图不存数据？那它怎么简化查询还能递归生成序列和控制权限？ - cmdragon's Blog
PostgreSQL索引这么玩，才能让你的查询真的"飞"起来？ - cmdragon's Blog
PostgreSQL的表关系和约束，咋帮你搞定用户订单不混乱、学生选课不重复？ - cmdragon's Blog
PostgreSQL查询的筛子、排序、聚合、分组？你会用它们搞定数据吗？ - cmdragon's Blog
PostgreSQL数据类型怎么选才高效不踩坑？ - cmdragon's Blog
想解锁PostgreSQL查询从基础到进阶的核心知识点？你都get了吗？ - cmdragon's Blog
PostgreSQL DELETE居然有这些操作？返回数据、连表删你试过没？ - cmdragon's Blog
PostgreSQL UPDATE语句怎么玩？从改邮箱到批量更新的避坑技巧你都会吗？ - cmdragon's Blog
PostgreSQL插入数据还在逐条敲？批量、冲突处理、返回自增ID的技巧你会吗？ - cmdragon's Blog
PostgreSQL的"仓库-房间-货架"游戏，你能建出电商数据库和表吗？ - cmdragon's Blog
PostgreSQL 17安装总翻车？Windows/macOS/Linux避坑指南帮你搞定？ - cmdragon's Blog
能当关系型数据库还能玩对象特性，能拆复杂查询还能自动管库存，PostgreSQL凭什么这么香？ - cmdragon's Blog
给接口加新字段又不搞崩老客户端？FastAPI的多版本API靠哪三招实现？ - cmdragon's Blog
流量突增要搞崩FastAPI？熔断测试是怎么防系统雪崩的？ - cmdragon's Blog
FastAPI秒杀库存总变负数？Redis分布式锁能帮你守住底线吗 - cmdragon's Blog
FastAPI的CI流水线怎么自动测端点，还能让Allure报告美到犯规？ - cmdragon's Blog
如何用GitHub Actions为FastAPI项目打造自动化测试流水线？ - cmdragon's Blog
如何用Git Hook和CI流水线为FastAPI项目保驾护航？ - cmdragon's Blog
FastAPI如何用契约测试确保API的「菜单」与「菜品」一致？
为什么TDD能让你的FastAPI开发飞起来？ - cmdragon's Blog
如何用FastAPI玩转多模块测试与异步任务，让代码不再"闹脾气"？ - cmdragon's Blog
如何在FastAPI中玩转"时光倒流"的数据库事务回滚测试？
如何在FastAPI中优雅地模拟多模块集成测试？ - cmdragon's Blog
多环境配置切换机制能否让开发与生产无缝衔接？ - cmdragon's Blog
免费好用的热门在线工具
RAID 计算器 - 应用商店 | By cmdragon
在线PS - 应用商店 | By cmdragon
Mermaid 在线编辑器 - 应用商店 | By cmdragon
数学求解计算器 - 应用商店 | By cmdragon
智能提词器 - 应用商店 | By cmdragon
魔法简历 - 应用商店 | By cmdragon
Image Puzzle Tool - 图片拼图工具 | By cmdragon
字幕下载工具 - 应用商店 | By cmdragon
歌词生成工具 - 应用商店 | By cmdragon
网盘资源聚合搜索 - 应用商店 | By cmdragon
ASCII字符画生成器 - 应用商店 | By cmdragon
JSON Web Tokens 工具 - 应用商店 | By cmdragon
Bcrypt 密码工具 - 应用商店 | By cmdragon
GIF 合成器 - 应用商店 | By cmdragon
GIF 分解器 - 应用商店 | By cmdragon
文本隐写术 - 应用商店 | By cmdragon
CMDragon 在线工具 - 高级AI工具箱与开发者套件 | 免费好用的在线工具
应用商店 - 发现1000+提升效率与开发的AI工具和实用程序 | 免费好用的在线工具
CMDragon 更新日志 - 最新更新、功能与改进 | 免费好用的在线工具
支持我们 - 成为赞助者 | 免费好用的在线工具
AI文本生成图像 - 应用商店 | 免费好用的在线工具
临时邮箱 - 应用商店 | 免费好用的在线工具
二维码解析器 - 应用商店 | 免费好用的在线工具
文本转思维导图 - 应用商店 | 免费好用的在线工具
正则表达式可视化工具 - 应用商店 | 免费好用的在线工具
文件隐写工具 - 应用商店 | 免费好用的在线工具
IPTV 频道探索器 - 应用商店 | 免费好用的在线工具
快传 - 应用商店 | 免费好用的在线工具
随机抽奖工具 - 应用商店 | 免费好用的在线工具
动漫场景查找器 - 应用商店 | 免费好用的在线工具
时间工具箱 - 应用商店 | 免费好用的在线工具
网速测试 - 应用商店 | 免费好用的在线工具
AI 智能抠图工具 - 应用商店 | 免费好用的在线工具
背景替换工具 - 应用商店 | 免费好用的在线工具
艺术二维码生成器 - 应用商店 | 免费好用的在线工具
Open Graph 元标签生成器 - 应用商店 | 免费好用的在线工具
图像对比工具 - 应用商店 | 免费好用的在线工具
图片压缩专业版 - 应用商店 | 免费好用的在线工具
密码生成器 - 应用商店 | 免费好用的在线工具
SVG优化器 - 应用商店 | 免费好用的在线工具
调色板生成器 - 应用商店 | 免费好用的在线工具
在线节拍器 - 应用商店 | 免费好用的在线工具
IP归属地查询 - 应用商店 | 免费好用的在线工具
CSS网格布局生成器 - 应用商店 | 免费好用的在线工具
邮箱验证工具 - 应用商店 | 免费好用的在线工具
书法练习字帖 - 应用商店 | 免费好用的在线工具
金融计算器套件 - 应用商店 | 免费好用的在线工具
中国亲戚关系计算器 - 应用商店 | 免费好用的在线工具
Protocol Buffer 工具箱 - 应用商店 | 免费好用的在线工具
IP归属地查询 - 应用商店 | 免费好用的在线工具
图片无损放大 - 应用商店 | 免费好用的在线工具
文本比较工具 - 应用商店 | 免费好用的在线工具
IP批量查询工具 - 应用商店 | 免费好用的在线工具
域名查询工具 - 应用商店 | 免费好用的在线工具
DNS工具箱 - 应用商店 | 免费好用的在线工具
网站图标生成器 - 应用商店 | 免费好用的在线工具
XML Sitemap
Vue 3还提供了`watchEffect`，它和`watch`的核心差异在于**依赖跟踪的方式**，选择哪个取决于你的需求：
3.1 核心差异对比
特性
watch
watchEffect
依赖跟踪
手动指定监听源（显式）
自动跟踪回调中使用的所有源（隐式）
初始执行
默认不执行（需immediate）
挂载时立即执行一次
旧值获取
支持（回调参数有oldValue）
不支持（只关注当前值）
适用场景
需要明确控制监听源、需要旧值
只需响应依赖变化、无需旧值
3.2 代码示例对比
vue
复制代码
执行结果：
页面加载时，watchEffect立即执行，输出当前count：0，message：Hello；
点击按钮修改count，watch和watchEffect都会触发；
修改message，只有watchEffect触发（因为它自动跟踪了message）。
4. 实践中的应用场景
侦听器的价值在于将"数据变化"与"副作用"解耦，以下是几个常见的实际场景：
4.1 数据变化时发起网络请求
比如用户选择城市后，自动加载该城市的天气：
vue
复制代码
当前天气：{{ weather }}
4.2 表单输入的实时验证
比如注册页的密码强度校验：
vue
复制代码
{{ passwordError }}
5. 课后Quiz
通过以下问题巩固所学知识（答案基于Vue官网文档）：
问题1：如何监听reactive对象中的嵌套属性（如state.user.address.city）？请写出代码示例。
答案：使用getter函数返回嵌套属性（显式指定监听源）：
javascript
复制代码
const state = reactive({
user: {
address: {
city: 'Beijing'
}
}
})
// 正确写法：用getter返回嵌套属性
watch(
() => state.user.address.city,
(newCity, oldCity) => {
console.log(`城市从 ${oldCity} 改为 ${newCity}`)
}
)
错误写法 ：直接写state.user.address.city（会丢失响应式跟踪）。
问题2：watch和watchEffect的核心区别是什么？请列举两点。
答案：
依赖跟踪方式 ：watch需要手动指定监听源（显式），watchEffect自动跟踪回调中使用的所有源（隐式）；
初始执行时机 ：watch默认不执行（需immediate选项），watchEffect挂载时立即执行一次。
6. 常见报错与解决方案
报错1：监听reactive对象时，旧值与新值相同
现象 ：修改reactive对象的属性后，watch回调中的oldValue和newValue完全一样。
原因 ：reactive返回的是代理对象 ，修改属性不会改变对象的引用，因此oldValue和newValue指向同一个对象。
解决方法：
若需监听单个属性，用getter函数返回属性（如() => state.count），此时oldValue会是原始值；
若需监听整个对象，手动保存旧值（适用于简单场景）：
javascript
复制代码
const state = reactive({ count: 0 })
let oldCount = state.count // 手动保存旧值
watch(
() => state.count,
(newCount) => {
console.log(`旧值：${oldCount}，新值：${newCount}`)
oldCount = newCount // 更新旧值
}
)
报错2：深度监听不生效
现象 ：修改reactive对象的嵌套属性，watch回调不触发。
原因 ：未开启deep: true选项，watch默认只跟踪对象的引用变化 ，不跟踪嵌套属性。
解决方法 ：在watch的选项中添加deep: true：
javascript
复制代码
watch(
() => state.user,
(newUser, oldUser) => {
console.log('用户信息更新：', newUser)
},
{ deep: true } // 必须加！
)
报错3：immediate: true时旧值为undefined
现象 ：开启immediate后，第一次执行回调时oldValue是undefined。
原因 ：immediate让回调在挂载时立即执行 ，此时还没有"旧值"（第一次执行）。
解决方法：
若不需要旧值，忽略即可；
若需要初始值，手动处理（比如用ref保存初始值）：
javascript
复制代码
const keyword = ref('Vue')
const initialKeyword = keyword.value // 保存初始值
watch(
keyword,
(newKeyword, oldKeyword) => {
if (oldKeyword === undefined) {
console.log(`初始关键词：${initialKeyword}`)
} else {
console.log(`关键词从 ${oldKeyword} 改为 ${newKeyword}`)
}
},
{ immediate: true }
)
参考链接
Vue官网：侦听器基础 → vuejs.org/guide/essen...
Vue官网：watch vs watchEffect → vuejs.org/guide/essen...
Vue官网：侦听器选项 → vuejs.org/guide/essen...