watch() 侦听响应式数据变化

最后更新：2026-10-22

watch() 侦听一个或多个响应式源，变化时执行回调，可以拿到新旧值，适合有副作用的响应逻辑。

📝 语法

watch(source, (newVal, oldVal) => { ... }, { immediate: true, deep: true })

// 侦听多个源
watch([count, keyword], ([c, k], [oc, ok]) => { ... })

source	ref / getter 函数 / 响应式对象 / 数组
callback	(newValue, oldValue, onCleanup) => void
options	immediate（立即执行）/ deep（深度侦听）/ flush（pre\|post\|sync）

返回值：停止侦听的函数 stop()

修改下面的代码，在预览区实时查看效果：

输出：

修改输入框时，日志显示「旧值 → 新值」，如「10 → 12」。

💡 提示 默认惰性：初始不执行，需要首次也跑就加 immediate: true。

⚠️ 注意 deep: true 会递归遍历大对象，性能开销明显；侦听具体字段用 getter（() => obj.a）更精准。

⚠️ 注意 异步副作用（如请求）要在 onCleanup / onWatcherCleanup 里取消旧请求，否则响应顺序会错乱。

更多案例即将上线。

Q watch 和 computed 有什么区别？

A computed 由数据推导值（返回值、有缓存）；watch 响应变化做副作用（发请求、改 DOM、存本地），不返回值。

Q 怎么在 watch 里第一次就执行？

A 加 { immediate: true }，回调在 setup 时先跑一次（oldValue 为 undefined）。

Q watch 能侦听多个数据吗？

A 可以，传数组：watch([a, b], ([newA, newB]) => ...)。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。