Vue 3 的 watch 监听 ref、reactive 或 getter 函数等响应式源；监听 ref 最简，监听 reactive 需 deep: true 或用 getter 精准捕获属性变化；支持数组或多级 computed；常用配置有 immediate、deep 和 flush。

Vue 3 中用 watch 监听响应式数据，核心是传入一个“可追踪的响应式源”和回调函数。它不是监听普通变量，而是监听 ref、reactive 或 getter 函数这类能被 Vue 追踪依赖的数据源。

监听 ref 和 reactive 对象

直接监听 ref 最简单，新旧值自动传入：

• const count = ref(0) → watch(count, (newVal, oldVal) => {...})
• const state = reactive({ name: 'Alice' }) → 若监听整个对象，需加 { deep: true } 才能捕获 state.name 的变化；否则只在 state 被整体替换时触发

监听对象的某个属性（推荐写法）

不建议监听整个 reactive 对象再手动判断字段，更高效的是用 getter 函数精准监听：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• watch(() => state.user.id, (newId, oldId) => {...}) —— 只响应 id 变化，轻量且明确
• watch(() => props.config, (newCfg) => {...}, { deep: true }) —— props 是只读对象，必须用箭头函数包裹才能建立响应式连接

监听多个数据源或计算属性

支持数组形式一次监听多个 ref 或 getter：

• watch([refA, refB], ([a1, b1], [a0, b0]) => {...}) —— 回调参数也是数组解构
• const fullName = computed(() => firstName.value + lastName.value) → watch(fullName, (newName) => {...}) 同样适用，因为 computed 本身是响应式引用

常用配置选项

通过第三个参数控制行为：

• immediate: true：定义监听器时立刻执行一次回调，适合初始化逻辑（如首次加载数据）
• deep: true：对对象或数组启用深层监听，内部属性变化也会触发（注意性能开销）
• flush: 'post'：让回调在组件 DOM 更新后执行，适合需要操作真实 DOM 的场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！