Vue中watch深度监听失效的根本原因是Vue无法检测直接索引赋值、对象新增属性、数组length修改等操作；修复需用Vue.set/splice、完整初始化响应式结构，并配合toRaw、lodash.isEqual或computed简化逻辑。
Vue.js 中的 watch 深度监听（deep: true）看似能监听对象或数组内部变化，但实际常出现“改了值却不触发”的情况——根本原因在于 Vue 无法检测到某些响应式变更，比如直接索引赋值、对象属性新增/删除、数组长度手动修改等。要真正实现可靠监听和新旧值比对，需结合响应式原理与合理写法。
深度监听失效的常见场景与修复
以下操作不会触发 deep 监听，即使开启了 deep: true：
-
直接通过索引设置数组项：如
arr[0] = newValue→ 改用Vue.set(arr, 0, newValue)或arr.splice(0, 1, newValue) -
为响应式对象新增属性：如
obj.newKey = 'val'→ 改用Vue.set(obj, 'newKey', 'val')（Vue 2）或使用reactive+ref配合defineProperty（Vue 3 推荐用reactive初始化完整结构） -
直接修改数组 length：如
arr.length = 0→ 改用arr.splice(0)或arr.length = 0后手动调用this.$forceUpdate()（不推荐，仅应急）
确保 watch 能捕获变化的关键写法
不是加了 deep: true 就万事大吉，还需注意初始化和监听目标的选择：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
监听整个响应式对象，而非其解构后的局部：避免
watch(() => obj.a, ...)，应watch(() => obj, ..., { deep: true }) -
Vue 3 中优先使用
watch的函数形式 +toRefs或computed包裹：确保依赖追踪准确，例如：watch(() => ({ ...state }), (newVal, oldVal) => { /* 可比对整个快照 */ }, { deep: true }) -
对数组监听时，慎用
immediate: true配合deep：首次触发时oldVal为undefined，需判空处理
新旧值精准比对的实用技巧
默认情况下，deep: true 的 watch 返回的新旧值是同一引用（浅拷贝），直接 === 或 JSON.stringify 易出错。推荐方式：
立即学习“前端免费学习笔记（深入）”；
-
用
lodash.isEqual做深比较：最稳妥，支持嵌套对象、数组、NaN、Date 等特殊类型 -
Vue 3 中利用
watch的回调参数原生支持新旧值：注意它传入的是响应式代理对象，若需原始值比对，可用toRaw(newVal)和toRaw(oldVal) -
手动快照 + diff（适合高频更新场景）：在
beforeUpdate或onBeforeUpdate中缓存上一版数据，再于watch中比对，避免重复序列化开销
替代方案：用计算属性 + 监听简化逻辑
当只需关注某个派生状态是否变化时，比直接监听深层结构更清晰：
- 将复杂判断提取为
computed属性，例如：const hasUnsavedChanges = computed(() => JSON.stringify(form) !== JSON.stringify(initialForm)) - 再监听该计算属性：
watch(hasUnsavedChanges, (isDirty) => { if (isDirty) showSaveTip() }) - 优点：语义明确、易于测试、避免 deep 监听性能隐患
