在 Vue 3 中，watch 的 getter 应仅访问目标属性（如 () => state.name）以实现细粒度监听；传 reactive 对象、解构或返回新对象均会导致监听失效或低效；支持数组监听多个属性及可选链访问深层嵌套属性。
在 Vue 3 中，watch 的 getter 函数本身不支持“只监听 reactive 对象的某个属性”这种细粒度行为——因为 watch 默认对整个响应式对象做浅层追踪（shallow），而 getter 返回的是一个值，Vue 会自动追踪其依赖。所以，**真正有效的做法是：在 getter 中只读取你关心的那个属性，Vue 就只会追踪它**。
✅ 正确写法：getter 中仅访问目标属性
只要你在 watch 的 getter 函数里只读取 obj.xxx，不碰其他属性，Vue 的响应式系统就会只收集这个属性的依赖，变化时才触发回调：
const state = reactive({
name: 'Alice',
age: 25,
city: 'Beijing'
})
watch(
() => state.name, // ✅ 只读 name → 只监听 name
(newVal, oldVal) => {
console.log('name changed:', newVal)
}
)
⚠️ 注意：不要直接传 reactive 对象或解构
以下写法会导致监听整个对象，或失去响应性：
-
❌ 错误 1：
watch(state, ...)→ 监听整个state，任何属性变化都会触发 -
❌ 错误 2：
const { name } = toRefs(state); watch(name, ...)→ 虽然可行，但没必要绕路；且若state是reactive（非ref），直接用() => state.name更简洁自然 -
❌ 错误 3：
watch(() => ({ name: state.name }), ...)→ 返回新对象，每次执行都创建新引用，导致频繁触发（除非加deep: true，但完全没必要）
? 进阶：监听多个独立属性（组合式）
如果想同时监听 state.name 和 state.age，但又不想监听 state.city，可以传数组：
立即学习“前端免费学习笔记（深入）”；
watch(
[() => state.name, () => state.age],
([newName, newAge], [oldName, oldAge]) => {
console.log('name or age changed:', newName, newAge)
}
)
? 补充：深层嵌套属性也能监听
比如 state.profile?.email，只要确保访问路径中每一步都是响应式属性（或使用可选链 + 空值处理），Vue 仍能正确追踪：
watch(
() => state.profile?.email,
(email) => {
if (email) console.log('email updated:', email)
}
)
注意：如果 profile 是 null 或 undefined，首次访问不会报错，但也不会建立依赖；等 profile 变为响应式对象后，后续 email 变化才会被捕捉（这是 Vue 的惰性依赖收集机制决定的）。
