用 watch 实现撤销重做，本质是捕获状态变化时机 + 保存快照 + 控制回退逻辑；适合轻量级场景，需防抖存档、双栈协同、边界控制及生命周期清理。
用 watch 实现撤销重做，本质是**捕获状态变化时机 + 保存快照 + 控制回退逻辑**。它适合轻量级场景（如表单编辑、画布操作），但不替代完整状态管理库（如 Vuex/Pinia/Zustand）。关键不在监听本身，而在“何时存、存什么、怎么切”。
监听变化并自动存档快照
监听目标数据（如编辑器内容、表单对象），每次变更时将当前状态深拷贝后推入历史栈。注意避免连续输入触发高频存档（如防抖）：
- 用
watch监听响应式数据源，回调中调用saveSnapshot() - 对字符串/简单对象可用
JSON.parse(JSON.stringify(state))快速深拷贝；复杂结构建议用structuredClone（现代浏览器）或lodash.cloneDeep - 为避免输入法组合字符过程中的中间态干扰，可加
debounce: 300（Vue 3watch支持）或手动节流
维护双栈结构：undoStack 和 redoStack
撤销重做依赖两个栈协同工作：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
undoStack：存储已执行的操作快照，
undo()时弹出顶部，设为当前状态，并将原状态压入redoStack -
redoStack：仅在
undo后有值，redo()时弹出并恢复，同时将该状态压回undoStack - 每次手动修改（非 undo/redo 触发）应清空
redoStack，防止跳步错乱
控制边界与用户反馈
避免越界操作和体验断层：
- 禁用按钮需实时响应：
:disabled="undoStack.length === 0"和:disabled="redoStack.length === 0" - 可限制历史栈长度（如最多存 50 步），超出时
shift()丢弃最早快照，节省内存 - 若状态含时间戳、光标位置等临时字段，存档前建议剔除或标准化，避免干扰比对
配合响应式更新与副作用清理
监听器不是一劳永逸，需兼顾生命周期：
- 在组件卸载前调用
watch返回的停止函数，防止内存泄漏 - 若监听的是计算属性或嵌套深层对象，用
deep: true并确认性能影响；必要时改用watchEffect+ 手动依赖追踪 - 撤销后需确保视图强制刷新（Vue 一般自动响应），但若涉及第三方库（如 Canvas、CodeMirror），需额外调用其更新方法
不复杂但容易忽略。核心是把 watch 当作“变化钩子”，真正起作用的是背后那套快照管理逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
