仅靠 watch 无法直接实现撤销/重做功能，需配合 undoStack 和 redoStack 管理状态快照，通过深拷贝保存关键数据、限制栈长、清空重做栈、赋值还原，并封装为可复用的 Composition API。
Vue.js 中的 watch 可用于响应数据变化，但**仅靠 watch 无法直接实现撤销/重做功能**。它适合触发记录动作，真正的核心是维护一个操作历史栈（undoStack）和重做栈（redoStack），配合状态快照或命令对象来还原。下面讲清楚关键逻辑和可落地的实现方式。
用 watch 触发“记录当前状态”时机
当用户编辑表单、拖拽元素、修改富文本等导致响应式数据变化时，watch 能捕获变化并调用保存逻辑。注意不是监听所有字段，而是监听整个可编辑对象或关键根状态：
- 监听整个表单对象（如
form），使用deep: true，但需防抖避免高频记录 - 在关键操作后手动调用
saveSnapshot()（比如点击“加一项”按钮后），比纯 watch 更可控 - 避免在 watch 内直接修改被监听的数据，否则可能引发无限循环
设计快照栈：只存必要状态，不存冗余数据
每次记录不是深拷贝整个应用状态，而是提取当前可撤销单元的关键字段。例如编辑一个待办事项列表，只需保存 items 数组；如果是画布，可只保存图层结构或变更的节点 ID 和属性。
- 用
JSON.parse(JSON.stringify(obj))或structuredClone（现代浏览器）做轻量深拷贝 - 限制 undoStack 长度（如最多 50 步），老记录自动移除，防止内存膨胀
- 每次新增快照前，清空 redoStack（因为新操作后，之前的重做失效）
执行撤销与重做：替换状态而非“回退”操作
撤销不是执行反向操作（如 delete 的反向是 add），而是把上一个快照赋值给当前响应式数据——这样兼容任意类型变更，也避免逻辑错乱。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
undo()：从 undoStack 弹出最后一个快照 → 推入 redoStack → 把该快照赋给目标响应式变量 -
redo()：从 redoStack 弹出 → 推入 undoStack → 赋值还原 - 操作前检查栈长度，空栈时禁用对应按钮（v-if 或 :disabled）
结合 Composition API 封装可复用逻辑
把快照管理抽成 composable，便于多个组件复用：
示例（简化版）：function useUndoRedo(sourceRef) {
const undoStack = ref([])
const redoStack = ref([])
<p>const save = () => {
const snapshot = JSON.parse(JSON.stringify(unref(sourceRef)))
undoStack.value.push(snapshot)
redoStack.value = [] // 清空重做
}</p><p>const undo = () => {
if (undoStack.value.length <= 1) return
const last = undoStack.value.pop()
redoStack.value.push(last)
sourceRef.value = JSON.parse(JSON.stringify(undoStack.value[undoStack.value.length - 1]))
}</p><p>const redo = () => {
if (redoStack.value.length === 0) return
const next = redoStack.value.pop()
undoStack.value.push(next)
sourceRef.value = JSON.parse(JSON.stringify(next))
}</p><p>return { save, undo, redo, canUndo: computed(() => undoStack.value.length > 1), canRedo: computed(() => redoStack.value.length > 0) }
}在组件中调用 const { save, undo, redo, canUndo, canRedo } = useUndoRedo(formData)，再绑定到按钮和 watch 即可。
