vue响应式默认深度监听但无法识别实质差异,需用lodash的isequal等函数实现真正的深变更检测与diff分析。

Vue 响应式数据本身已支持深度响应(reactive 和 ref 默认深层),但“监听变化”不等于“感知差异”。当需要在 watch 中准确比对嵌套对象内容是否真正改变、或需同步外部系统、做变更快照、触发防抖日志等场景时,Lodash 的深比较能力就成为实用补充。
为什么 Vue 的 deep: true 不够用?
Vue 的 deep: true 能触发回调,但 newVal 与 oldVal 仍是同一响应式对象的引用——它们 内存地址相同,仅内部属性值不同。这意味着:
-
newVal === oldVal恒为true,无法直接用全等判断“是否真变了” - 无法得知具体哪个字段被修改、改了什么值
- 不适合做变更 diff、审计日志、状态回滚等依赖“差异识别”的逻辑
用 Lodash 实现真正的深变更识别
核心思路:在 watch 回调中,用 _.isEqual() 判断内容是否实质变化,再用 _.differenceWith() 或 _.cloneDeep() + 手动比对提取差异。

