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 的场景
