vue侦听器本身不执行撤销逻辑，真正实现撤销重做需构建快照管理机制：在操作终点（如blur、点击）触发时用toraw+structuredclone保存不可变快照，双栈闭环流转并清空冗余redo，替换整个reactive对象确保视图同步。
Vue 侦听器（watch）本身不执行撤销逻辑，它只是在响应式数据变化时触发回调——真正实现撤销重做的，是围绕它构建的一套快照管理机制。关键在于：用 watch 捕获“变更完成”的时机，再由你主动保存不可变快照、维护双栈、控制状态切换。
监听时机要选对：不是每次赋值都存，而是操作结束才记
直接监听 input 或 reactive 字段的频繁变化（如每敲一个字），会导致快照爆炸式增长、内存占用高、用户体验卡顿。正确做法是：
- 监听用户明确的“操作终点”，比如表单
blur、按钮点击后、编辑器contentchange事件触发时调用saveSnapshot() - 若必须监听输入过程，务必加防抖（debounce 300ms），避免中间态（如输入法组合字符）污染历史
- 避免监听整个
reactive对象并开启deep: true——性能开销大且难以区分“一次编辑”和“十次属性更新”
快照必须不可变：克隆要彻底，别留响应式残留
Vue 的响应式对象（Proxy）不能直接入栈，否则快照会随原始 state 变动而“活”起来，失去历史意义。正确做法是：
- 先用
toRaw(state)剥离 Proxy 包装 - 再用
structuredClone()（推荐）或JSON.parse(JSON.stringify())深拷贝 - 若 state 含函数、日期、Map/Set 等特殊类型，
structuredClone更可靠；旧环境可用lodash.cloneDeep - 快照只存业务核心字段，剔除
cursorPos、lastModified等临时状态，避免干扰回退一致性
双栈协同要闭环：undo/redo 必须配对操作 + 清空冗余
撤销与重做不是简单弹出数组，而是两个栈之间的状态流转，需保证原子性和可逆性：
-
undo()：从undoStack弹出最新快照 → 将当前 state 推入redoStack→ 用弹出的快照替换 state -
redo()：从redoStack弹出 → 将当前 state 推入undoStack→ 用弹出的快照替换 state - 每次手动修改（非 undo/redo 触发）后，必须清空
redoStack，否则用户连续编辑后点 redo，会跳到错误的历史节点 - 限制栈长度（如最多 50 步），超出时
undoStack.shift()删除最早快照，防止内存泄漏
视图同步要可靠：替换 state，而非局部更新
Vue 响应式更新依赖于响应式对象的引用变更。若仅修改 state 内部属性（如 state.text = 'new'），watch 虽能捕获，但快照已失效；正确方式是：
- 所有撤销/重做操作，都用新快照 完全替换 当前
reactive对象：state = reactive(restoredSnapshot) - 确保组件内使用的是该响应式对象（而非其某个属性），否则视图不会整体刷新
- 若涉及第三方库（如 CodeMirror、Canvas），在替换 state 后手动调用其
setValue()或render()方法同步界面 - 组件卸载前，调用
watch返回的停止函数，避免内存泄漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
