vue中实现undo/redo的核心是用户操作完成时手动保存不可变快照并用双栈管理，而非监听字段变化；快照需深克隆脱离响应式，通过替换整个state触发更新，并封装为useundo组合式函数。
Vue 中实现 Undo/Redo 不依赖框架内置能力，核心是“在用户明确操作完成时，保存不可变快照，并用栈结构管理跳转”。它不是监听每个字段变化，而是由业务逻辑控制存档时机，确保语义清晰、内存可控、行为可预期。
关键不在监听，而在存档时机
响应式系统本身不记录历史，所以不能靠 watch 每个 ref 或 reactive 字段来自动捕获变更。真正可靠的方式是：在用户完成一次有意义的操作后（比如点击“保存编辑”“提交表单”“拖拽结束”），手动触发一次快照保存。
- 例如表单编辑场景，应在“确认修改”按钮点击后调用 saveSnapshot()，而不是输入框 onInput 时就存
- 富文本编辑器中，应在编辑器 blur 或 toolbar 操作（加粗、插入图片）完成后存，避免高频打点
- 可视化画布中，应在 dragend 或 resizeend 后保存，而非 mousemove 过程中
快照必须不可变且脱离响应式
直接 push reactive 对象会污染历史——后续修改会影响旧快照。正确做法是先转为普通 JS 数据，再深克隆：
- 推荐：structuredClone(toRaw(state))（现代浏览器支持，保留 Date/Map/Set 等类型）
- 兼容方案：JSON.parse(JSON.stringify(toRaw(state)))（不支持函数、undefined、BigInt、循环引用）
- 避免使用 ref 或 reactive 包裹快照，它们只是 plain object，用 shallowRef 存储更轻量
双栈结构 + 状态替换
用两个数组分别存放历史快照与重做快照，跳转时直接替换整个响应式状态，让 Vue 自动触发更新：
- undo：从 undoStack 弹出一项 → 推入 redoStack → 用该快照创建新 reactive 替换原 state
- redo：从 redoStack 弹出一项 → 推入 undoStack → 同样替换 state
- 每次新操作前，若当前不在历史末尾（即刚执行过 undo），需清空 redoStack，避免分支历史混乱
封装成可复用的组合式函数
把上述逻辑抽成 useUndo，支持任意 reactive 对象，对外暴露简洁接口：
- 接收初始 state 和 maxLength（如 50），内部自动裁剪过长历史
- 暴露 save()（手动存档）、undo()、redo()、canUndo、canRedo（计算属性）
- 可配合 watchEffect 监听特定 action 完成后自动 save，也可完全由组件显式调用
不复杂但容易忽略的是快照时机——不是“状态变了就存”，而是“用户意图明确要改时才存”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
