Vue 3 的 watch 无法直接侦听对象属性数量变化，因 Object.keys() 返回静态数组、不触发响应式依赖收集；需用 reactive 对象配合 deep: true 监听整个对象，或封装 watchKeys 工具函数实现键增删检测。

Vue 3 的 watch 本身**无法直接侦听对象属性数量的变化**（比如新增或删除一个 key），因为 Object.keys(obj) 返回的是普通数组，不是响应式数据——它的变化不会触发依赖收集，也就不会被 watch 捕获。

为什么 Object.keys(obj) 不会触发 watch

原因很底层：

• Object.keys() 是一次性的同步计算，返回的是静态字符串数组，不建立任何响应式连接；
• 即使 obj 是 reactive 的，Object.keys(obj) 的执行过程不会触发 get 拦截器去追踪所有 key，Vue 无法知道你“关心的是 keys 的集合”；
• 所以写成 watch(() => Object.keys(user), ...) 是无效的——回调永远不会执行。

真正可行的替代方案

要感知对象属性增删，必须让 Vue 明确“监听对象本身的结构变化”，这需要借助响应式机制的底层能力：

• 用 reactive + Proxy 的 deleteProperty 和 set 拦截：确保对象是通过 reactive 创建的，且增删操作使用响应式方式（如 delete user.age 或 user.newField = 'x'）；
• 监听对象本身并启用 deep: true：虽然开销略大，但这是最直接、能覆盖属性增删的通用方式；
• 配合 onTrigger 调试（仅开发期）：可观察哪些操作触发了依赖更新，辅助验证是否真有结构变更被捕获。

推荐写法：监听对象 + deep

✅ 正确示例：

Kibana Saved Objects

通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。

下载

const user = reactive({ name: '张三', age: 25 })

watch(
  () => user, // 必须是 getter 函数
  (newVal, oldVal) => {
    const newKeys = Object.keys(newVal)
    const oldKeys = Object.keys(oldVal)
    const added = newKeys.filter(k => !oldKeys.includes(k))
    const removed = oldKeys.filter(k => !newKeys.includes(k))
    console.log('新增属性:', added, '删除属性:', removed)
  },
  { deep: true }
)

⚠️ 注意：必须用 () => user 包裹，不能直接传 user；deep: true 是必需的，否则增删 key 不会触发。

更轻量的进阶做法：封装为自定义函数

如果频繁需要这类监听，可以封装一个 watchKeys 工具函数：

function watchKeys(target, callback, options = {}) {
  watch(
    () => ({ keys: Object.keys(target) }),
    ({ keys: newKeys }, { keys: oldKeys }) => {
      const added = newKeys.filter(k => !oldKeys.includes(k))
      const removed = oldKeys.filter(k => !newKeys.includes(k))
      callback({ added, removed, newKeys, oldKeys })
    },
    { ...options, deep: true }
  )
}

// 使用
watchKeys(user, ({ added, removed }) => {
  console.log('键变化:', { added, removed })
})

这个写法本质仍是靠 deep: true 触发，但把 keys 提取和比对逻辑收拢，更清晰可控。