vue watch 默认不支持深度对比，deep: true 仅触发回调但无法识别具体变更字段；需结合 lodash.isequal 或 fast-deep-equal 判断实质差异，配合 clonedeep 缓存及 computed 聚合优化监听。
Vue 侦听器（watch）本身不提供“深度对比”能力，它只负责通知你某个响应式数据“变了”，但默认无法告诉你“哪里变了、怎么变的”。真正的深度对比（即识别嵌套对象中具体字段的增删改）需要额外手段配合实现。
watch 的 deep: true 只触发，不分辨
开启 deep: true 后，watch 能捕获嵌套属性的变化并执行回调，但：
– newVal 和 oldVal 指向的是同一响应式对象（newVal === oldVal 为 true）
– 无法直接判断哪个子字段被修改、值是否实质不同
– 不适合做审计日志、变更快照、差异同步等依赖“内容差异”的场景
用 Lodash 实现内容级深对比
在 watch 回调中引入 lodash.isEqual，可准确判断新旧值是否真正不同：
- 安装：npm install lodash
- 导入：import { isEqual, cloneDeep } from 'lodash'
- 搭配使用：每次变化后用
isEqual(newVal, prev)判断实质变更，再用cloneDeep更新缓存副本 - 避免高频 clone：如用于输入框，建议节流或仅在提交/失焦时触发
精准提取变更字段（diff）
若需知道“哪个 key 改了”，不能只靠 isEqual，还需进一步分析：
- 对扁平结构：遍历
Object.keys(newVal)，逐个比对子项是否相等 - 对深层嵌套：可用
lodash.differenceWith或封装递归对比逻辑 - 更轻量替代：fast-deep-equal（仅 1.2KB，纯函数，无副作用）
监听多个数据源时的对比优化
当需同时响应多个 ref 或 reactive 字段，推荐先聚合再监听：
- 用 computed 包装关注字段，生成一个结构稳定的新对象
- watch 该 computed 对象，并开启 deep: true
- 新旧值结构一致，可直接按字段名对比，逻辑清晰不易出错
- 避免监听整个大 reactive 对象，减少无关更新干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
