Vue不自动保存数据变更历史，需通过watch+deep捕获快照、Proxy拦截细粒度操作、统一store action入口三层次实现；须规避数组索引赋值和对象新增属性等响应式盲区。
Vue 本身不自动保存数据变更历史，深层对象属性修改时要记录完整变更栈，关键在于拦截所有合法的响应式更新路径，并确保日志与视图更新严格同步。直接依赖 watch 的 deep: true 只能捕获变化结果，无法拿到“谁改了哪一层、怎么改的”这类细粒度信息，所以必须配合主动拦截机制。
用 watch + deep:true 捕获变化快照（基础层）
这是最轻量的起点，适合记录“整体状态快照”，但不区分具体字段变动：
- 监听整个 reactive 对象，开启
deep: true和immediate: true，首次加载也存一次初始状态 - 每次触发 handler 时，用
structuredClone或JSON.parse(JSON.stringify())（注意 Date/Function 限制）保存当前值 - 把新旧快照 push 到一个
ref([])日志栈中，结构如{ timestamp, before: {}, after: {}, path: 'root' }
用 Proxy 封装可记录的响应式对象（精准层）
若需知道 user.profile.avatar = 'new.jpg' 这样的具体操作，就得自己代理对象：
- 创建一个包装函数，接收原始对象，返回带日志能力的 Proxy 实例
- 在
set拦截器里：提取 key 路径（支持嵌套如'profile.avatar'）、保存旧值、执行原 set、再 push 日志条目 - 日志条目包含
key、oldVal、newVal、timestamp，避免用响应式数据存日志（防止递归触发） - 对数组操作也要单独处理，比如重写
push、splice方法，并在内部调用日志记录
统一状态修改入口（工程层）
真正可控的做法是禁止组件内直接修改深层属性，全部走 store action：
立即学习“前端免费学习笔记（深入）”；
- Pinia 中定义
updateUserField(path, value)这类方法，path 支持点号或数组形式（如['profile', 'name']） - action 内部先用
get提取旧值，再用set更新，最后把操作元信息写入日志栈 - 配合 TypeScript 接口约束日志格式，例如：
{ type: 'SET', path: string, payload: any, timestamp: number } - 这样既能回溯，也能支持撤销（按日志逆序还原），还能对接 devtools 插件或远程审计系统
绕过 Vue 响应式盲区的注意事项
深层监听容易漏掉两类“看似修改、实则无声”的操作：
-
数组索引赋值：如
list[0] = newItem不触发响应，也不进日志 → 改用list.splice(0, 1, newItem)或封装setAt(list, 0, newItem) -
对象新增属性：如
obj.newKey = 'val'不被 Proxy 拦截 → 必须用Vue.set(obj, 'newKey', 'val')或store.$patch({ newKey: 'val' }) - 所有日志记录前，确认该操作已被 Vue 响应式系统捕获，否则日志有、视图没更新，排查会误导
