watch 侦听数据变化（选项式）
最后更新：2026-10-22
watch 侦听数据变化（选项式）
watch 选项按“被侦听的数据名”组织回调：支持 handler、deep、immediate 与字符串方法名简写。
| 分组 | 选项式·状态 |
|---|---|
| 类型 | 选项 |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
export default {
data() { return { keyword: "" } },
watch: {
keyword(newVal, oldVal) { /* ... */ },
"user.name"(v) { /* 侦听嵌套字段用引号键 */ }
}
}⚙️ 参数
| value | 对象：键为数据路径（可带引号写嵌套/带点路径），值为函数或 { handler, deep, immediate } |
|---|
返回值：无返回值；回调收到 (新值, 旧值)
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
输入时记录「旧值 → 新值」，如「a → ab」。💡 要点
💡 提示 惰性执行：需要初始也跑一次加 immediate: true。
⚠️ 注意 侦听对象内部字段要用引号键或 deep: true；deep 开销随对象增大。
ℹ️ 说明 字符串形式 'methods 里的方法名' 可复用已有方法作为处理器。
🏷️ 相关状态
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和组合式 watch 的关系？
A 同一机制的两种写法：选项式用数据名作键，组合式显式传源与回调。
Q 怎么侦听数组整体变化？
A 数组替换会触发；原地 push 需 deep: true 或侦听 length。
Q 能同时侦听多个吗？
A 写多个键各自回调，或用组合式 watch([a, b]) 合并处理。
