Vue.js中实现带历史记录的撤销逻辑，关键在于安全捕获状态、合理存取快照、避免副作用循环并支持可预测还原：需防抖监听或手动触发saveSnapshot、只存最小必要状态、用structuredClone或JSON深拷贝、双栈管理配合静默开关防止watch递归、封装为useUndoRedo组合式函数统一复用。
Vue.js 中实现带历史记录的撤销逻辑，关键不在监听本身，而在如何安全捕获状态、合理存取快照、避免副作用循环，并支持可预测的状态还原。
用 watch 触发快照，但别全靠它
watch 可以感知响应式数据变化，适合在表单更新、画布拖拽等场景下触发保存动作，但它不是“自动录像机”。实际开发中建议：
- 监听整个编辑对象（如 form 或 content），开启 deep: true，但必须加防抖（如 300ms），否则输入一个字就记一次，栈迅速膨胀
- 更推荐在明确操作后手动调用 saveSnapshot()，比如点击“添加节点”“确认修改”按钮之后——时机可控，语义清晰
- watch 回调里禁止直接修改被监听的数据，否则会触发新一轮 watch，造成无限递归或历史污染
快照只存关键字段，不做全量深拷贝
每次保存不是把整个组件 data 或 store state 复制一遍，而是提取当前可撤销单元的最小必要状态。例如：
- 待办列表组件 → 只存 items 数组
- 思维导图（jsmind）→ 只存 get_data() 返回的结构化树
- grid 布局 → 只存 layoutData 中每个 item 的 x/y/w/h/i
深拷贝用 JSON.parse(JSON.stringify(obj)) 兼容性好；现代项目可用 structuredClone()，支持 Map/Set/Date 等类型。
立即学习“前端免费学习笔记（深入）”；
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
双栈管理 + 静默开关防循环
撤销重做本质是两个栈的协作：undoStack 存过去状态，redoStack 存被撤销掉的未来状态。每次新操作前必须清空 redoStack，否则重做会错乱。
更要处理一个经典陷阱：执行 undo() 时赋值给响应式变量，会再次触发 watch —— 这就需要静默开关：
- 定义一个标志位，如 _isApplyingSnapshot = ref(false)
- 在 watch handler 开头加判断：if (_isApplyingSnapshot.value) return
- undo/redo 执行前设为 true，赋值完成后立刻设回 false
封装成可复用的组合式函数
把通用逻辑抽成 useUndoRedo(sourceRef)，便于多个组件复用：
- 接收目标响应式引用（如 ref(form)）
- 暴露 save()、undo()、redo() 方法
- 内部自动管理栈长度（如限制最多 50 步）、深拷贝、静默赋值
- 返回 canUndo 和 canRedo 计算属性，方便控制按钮禁用态
这样既保持逻辑内聚，又避免每个组件重复写栈操作和边界判断。
