Vue watch 怎样只监听对象的一个字段

我第一次在 Vue 3 里处理表单联动时，写的是 watch(state, ...)。它确实能收到变化，但对象里的无关字段一动，回调也会跟着执行；改成 watch(state.userId, ...) 后，回调又完全不动了。

只监听一个字段的正确写法是把字段访问放进 getter：watch(() => state.userId, callback)。getter 让 Vue 在执行 source 时记录这一次属性读取，后续只根据这个属性的变化触发回调。

官方文档：https://vuejs.org/guide/essentials/watchers.html

记住这条边界：监听整个 reactive 对象会隐式进入深度监听；监听对象字段时要传 getter，而不是把字段当前值直接传给 watch。

我为什么先把整个对象监听改掉

下面的场景很常见：地址表单里只有 userId 变化时需要重新加载用户信息，keyword 和 remark 只是本地编辑状态。如果直接监听 state，三个字段都会成为回调触发的背景。

import { reactive, watch } from 'vue'

const state = reactive({ userId: 0, keyword: '', remark: '' })

// 监听 reactive 对象会覆盖它的嵌套变化，范围大于当前任务
watch(state, (nextState) => {
  console.log('重新加载用户：', nextState.userId)
})

// keyword 或 remark 的修改也可能让上面的副作用重新执行
state.keyword = 'vue'
state.remark = '临时备注'

这类问题的表现通常不是“watch 失效”，而是副作用范围过大：请求重复、计算重复，或者用户只编辑备注却触发了用户资料刷新。Vue 官方文档也明确区分了直接监听 reactive 对象与监听 getter 返回值的行为。

只监听一个字段，关键是把属性读取写进 getter

改写时只需要把目标字段包在函数里。Vue 会把 getter 作为 source，在依赖收集期间读取 state.userId；当其他字段变化时，getter 的返回值不变，回调就没有理由重新执行。

import { reactive, watch } from 'vue'

const state = reactive({ userId: 0, keyword: '', remark: '' })

// getter 只读取 userId，Vue 因此只追踪这个字段
const stop = watch(
  () => state.userId,
  (newUserId, oldUserId) => {
    // 只有 userId 改变时才发起与用户资料相关的副作用
    if (newUserId !== oldUserId) {
      loadUserProfile(newUserId)
    }
  }
)

function loadUserProfile(userId) {
  // 示例只表达调用边界，真实项目中应在这里处理请求错误
  console.log('加载用户资料：', userId)
}

// 不再需要时可以停止这个 watcher
// stop()

我觉得 getter 的价值不只是“写法能跑”，更重要的是它把依赖范围写在代码表面：读者一眼就能看出回调只和 userId 有关。不要写成 watch(state.userId, ...)，因为调用 watch 之前 JavaScript 已经把当前数字取出来了；Vue 接收到的是普通值，不是可追踪的 source。

嵌套字段、首次执行和 deep 怎么取舍

嵌套对象也沿用同一个思路，例如只监听用户名称：

const state = reactive({
  profile: { name: '小林', level: 1 },
  enabled: true
})

// getter 只访问 profile.name，不把整个 profile 交给深度监听
watch(
  () => state.profile.name,
  (newName, oldName) => {
    console.log('名称变化：', oldName, '->', newName)
  },
  {
    // 页面初始化时也要同步一次时才打开 immediate
    immediate: true
  }
)

immediate: true 解决的是“首次要不要执行”，不是“监听哪些字段”。如果需求是 profile 内任意层级的变化，才考虑 deep: true；它会遍历更多嵌套属性，在大型对象上有额外成本。若只是一个明确字段，getter 通常更窄、更容易解释。

• 字段替换：watch(() => state.profile, ...) 关注的是整个对象引用是否换了。
• 字段内部属性：watch(() => state.profile.name, ...) 只关注 name。
• 任意深层修改：才使用 deep，并接受更大的追踪范围。

我最后保留的判断清单

如果是 Options API，可以用简单的点号路径，例如 'form.userId'，但它不支持任意表达式；Composition API 则优先使用 getter。排查时我通常按下面的顺序确认：

1. 目标是单个字段，先写成 () => state.field。
2. 目标是嵌套字段，继续把完整属性访问写进 getter。
3. 只是想首次同步一次，加 immediate，不要因此改成 deep。
4. 只有确实要捕获任意嵌套变更时，才扩大到深度监听。

最终效果可以用一句话检查：修改无关字段时，回调不应执行；修改目标字段时，回调应拿到新旧值。这个结果比盲目增加 nextTick 或调整组件刷新时机更能说明监听边界是否写对。

常见问题

可以直接写 watch(state.userId, callback) 吗？

不建议。它会先读取 state.userId 的当前值，watch 收到的是普通数字或字符串。请改成 watch(() => state.userId, callback)。

只监听一个字段还需要 deep 吗？

通常不需要。getter 已经把 source 缩小到目标字段；deep 是为了捕获对象内部更广泛的嵌套变更，范围和成本都更大。

总结：监听对象字段时，把属性访问留在 getter 里；用 immediate 控制首次执行，用 deep 表达确实需要的深层范围。这样既能减少无关副作用，也让后续维护者清楚 watcher 到底依赖什么。