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() + 手动比对提取差异。
- 安装依赖：
npm install lodash - 导入方法：
import { isEqual, cloneDeep } from 'lodash' - 配合
watch使用（组合式 API 示例）：
const formData = ref({ name: '', profile: { city: '', tags: [] } });
let prevFormData = cloneDeep(formData.value);
watch(formData, (newVal) => {
if (!isEqual(newVal, prevFormData)) {
console.log('检测到实质变更', { old: prevFormData, new: newVal });
// ✅ 此处可安全执行副作用：上报差异、校验字段、更新缓存等
prevFormData = cloneDeep(newVal);
}
}, { deep: true });
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
进阶：自动提取变更字段（diff）
若需知道“哪个 key 改了”，可用 _.differenceWith 或封装简易 diff 工具：
- 对简单扁平结构，遍历
Object.keys()配合isEqual判断子项 - 对深层嵌套，推荐使用
lodash.isequal+ 递归对比，或引入轻量 diff 库（如deep-diff） - 注意性能：避免在高频更新中（如输入框实时编辑）频繁 deep clone；可加节流或仅在提交/失焦时触发
替代方案：比 Lodash 更轻量的选项
如果只用到 isEqual，可考虑更小体积的替代：
-
fast-deep-equal（≈1.2KB，无副作用，纯函数） -
shallowequal（仅浅层，适合已知结构层级） - Vue 3.5+ 新增的
watch的deep: number限制遍历深度，减少误触，但不解决差异识别问题
