vue 2 中 watch 默认仅监听引用变化，需 deep: true 才能监听嵌套属性；推荐精准监听路径如 'user.profile.avatar'；新增属性须用 vue.set，不存在路径会静默失败。

Vue 2 中 watch 默认只监听对象或数组的**引用变化**，内部属性改了不会触发。要监听对象任意嵌套层级的变更，必须启用深度监听（deep: true），且写法有明确要求。

正确写法：监听整个对象 + handler + deep

这是最可靠、最常用的方式。watch 的键是对象字段名（如 user），值是一个配置对象，里面必须包含 handler 回调函数和 deep: true：

• 不能只写 deep: true 而不写 handler，否则无效
• handler 接收新旧值，可用于对比或执行逻辑
• 适用于需要响应对象任意嵌套属性变动的场景

示例：

data() {
  return {
    user: { profile: { name: 'Alice', avatar: 'a.png' }, settings: { theme: 'dark' } }
  }
},
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user 任一嵌套属性变了')
    },
    deep: true
  }
}

更推荐：精准监听某条路径（无需 deep）

如果只关心某个固定深层字段（比如 user.profile.avatar），直接用字符串路径作为 watch 键即可。它不依赖 deep，性能更好，且 newVal/oldVal 是真实值，对比安全：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 路径必须加单引号：'user.profile.avatar'
• 确保该路径在初始化时存在，否则监听无效
• Vue 2 不支持可选链（如 user?.profile?.avatar），需提前保证结构稳定

示例：

watch: {
  'user.profile.avatar'(newVal, oldVal) {
    console.log('头像地址变了:', newVal)
  }
}

常见误区和注意点

这些细节容易导致监听失效：

• 直接赋值替换数组（this.list = [...this.list]）会触发；但用 push/splice 等变异方法修改时，watch 仍能捕获——Vue 2 已重写了数组原型方法
• 给对象新增属性（如 this.user.newField = 'x'）不会触发响应式，需用 Vue.set 或 this.$set
• 监听不存在的字段（如 'user.info.phone' 但 info 为 undefined）会导致静默失败
• 深层路径太复杂时，建议先用 computed 提取再监听，逻辑更清晰、调试更容易

补充：immediate 和 sync 可选配置

可在配置对象中加入其他选项增强控制力：

• immediate: true：组件创建时立即执行一次 handler，适合初始化请求
• sync: true：让回调同步执行（默认异步批量处理），慎用，可能影响性能

示例：

user: {
  handler() { /* ... */ },
  deep: true,
  immediate: true
}

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