Vue3中撤销重做功能需通过快照+双栈+响应式同步实现：在操作结束时用structuredClone(toRaw(state))保存不可变快照，用ref管理undoStack/redoStack，替换state触发视图更新，watch仅作时机捕获而非核心逻辑。
监听器 watch 本身不直接实现撤销重做，它只是响应式系统中用于“侦听状态变化”的工具。真正支撑撤销重做的是对状态变更历史的显式记录与回溯控制——需要配合可变状态快照、操作栈和受控更新逻辑来完成。
核心思路：不是靠 watch 做事，而是用 watch 捕获时机
watch 的作用是“发现状态变了”，但它不决定怎么变、也不保存过去。所以必须主动设计三个关键部分：
- 操作栈（History Stack）：用数组保存每次有效变更前的状态快照（或对应的逆向操作）
-
受控更新入口：所有修改都必须走统一函数（如
commit({ type: 'UPDATE_NAME', payload: 'Alice' })），不能直接赋值 - watch 作为辅助钩子：在状态更新后触发，把当前新状态推入历史栈（或仅在特定条件下记录）
Vue 中结合 watch 的典型实现方式
以 Vue 3 的 watch + ref 为例，适用于表单、编辑器等轻量场景：
- 用
ref存当前数据（如content） - 用两个数组分别存
undoStack和redoStack - 在
watch(content, () => { ... })中，把旧值 push 到undoStack，清空redoStack -
undo()就是把undoStack末尾弹出，赋给content，再把原值压入redoStack
注意：需防抖或节流 watch 回调，避免输入过程中高频记录；也可改用 watchEffect 配合手动 track 变更点，更可控。
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
React 场景下 watch 的替代方案
React 没有内置 watch，但可用类似逻辑模拟：
- 用
useEffect监听某个 state 变化，触发快照记录 - 配合自定义 Hook（如
useUndoable）封装栈管理与操作函数 - 关键不是监听本身，而是确保所有更新都经由
dispatch或update函数，才能插入记录逻辑
例如：const [state, updateState] = useUndoable(initial)，内部在 updateState 执行时自动存档，比依赖 useEffect 监听更可靠。
哪些情况不适合用 watch 实现撤销重做
watch 是被动响应，无法解决以下问题：
- 异步更新不可控：API 返回后 setState，watch 虽能捕获，但无法区分是用户操作还是后台同步导致的变更
- 批量变更丢失上下文：一次操作引发多个 state 更新，watch 触发多次，但你可能只想记“一次编辑”而非“十次属性赋值”
- 性能开销大：深克隆整个 state 快照频繁存栈，尤其对象嵌套深时，内存和 GC 压力明显
此时更适合用命令模式（Command Pattern）或操作日志（Op Log）：只记录“做了什么”，而不是“变成什么样”，体积小、可合并、易序列化。
