在 Vue 中，有时你不仅仅是想让 “数据驱动视图”，你还可能想：
- 数据变了，发一个请求；
- 数据变了，写一条日志；
- 数据变了，更新 localStorage 或调用浏览器 API…
这时候，你就可以使用 watch —— Vue 提供的“观察者”函数。
🛠 什么是watch？
watch() 用于观察响应式数据的变化，并在变化时执行回调函数。
它可以理解为是：
✅ 一个“数据监听器”，而不是“模板驱动者”。
✅ 用法一：监听一个ref（最常见）
<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 函数（推荐监听对象的属性）
const user = ref({ name: '90后晨仔' })
watch(
() => user.value.name, // 使用 getter 精确侦听某个属性
(newName, oldName) => {
console.log(`用户名从 ${oldName} 改成了 ${newName}`)
}
)
🔍 为什么不直接监听user？
如果直接监听整个对象：
watch(user, () => { ... })
那么 Vue 只知道“对象变了”，不确定哪个字段变了。
而用 getter 明确指定 user.value.name，可以更精确、更高性能地侦听。
✅ 用法三：高级选项（立即执行 & 深度监听）
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 的实践演示：
❤️ 如果你觉得有帮助：
- 点个赞 👍 让我知道你看见了～
- 收藏 📌 随时查阅不怕忘～
- 评论 💬 说说你对 watch 的理解 or 疑惑～
- 关注 🔔 持续更新 Vue3 核心系列内容！
