通过vue3+immer实现撤销与重做

前言

最近自己琢磨一个低代码平台，在编写页面编辑器时，为实现撤销与重做引入 immer，这里记录一下实现过程。

为什么 immer

原理

一般地，页面编辑器本质就是在维护与解析一个 JSON 配置文件，然后再根据配置文件进行生成代码或生成页面等操作。因此编辑器的撤销与重做就是对配置文件版本管理，每次配置文件完成修改时都会生成一个新版本。

实现

1. 快照

在每次修改前将状态全量复制为一个旧版本，放入版本管理。

版本管理可以通过单链表，或双堆栈实现。

• 单链表：通过维护一个版本指针指向当前版本。当发生修改时，清空链表中当前版本指针之后的版本，并将生成的新版本添加到链尾，指针指向链尾。当执行撤销时，指针前移，执行重做时，指针后移。
• 双堆栈：维护一个撤销栈和一个重做栈，当发生修改时，将旧版本压入撤销栈，并清空重做栈。执行撤销时，将当前版本压入重做栈，从撤销栈中弹出置顶作为当前版本。而执行重做时，将当前版本压入撤销栈，从重做栈中弹出栈顶作为当前版本。

优点：速度快；缺点：占内存；

1. 补丁

在每次修改过程中，将每处修改当做一个补丁，一个版本可以有多个补丁。当进行撤销与重做时就是进行补丁的撤销与重做。