vue 实现撤回、重做，避免对watch的影响

在 Vue 中实现撤回和重做的功能，通常需要用到一个叫做“命令模式”的设计模式。这个模式的基本思想是将操作封装成一个对象，以便能够在需要的时候执行或者撤销这个操作。

在具体实现中，我们可以定义一个 `Command` 类，表示一个操作，这个类中包含了一个 `execute` 方法和一个 `undo` 方法，分别表示执行和撤销这个操作。然后我们再定义一个 `CommandManager` 类，用来管理所有的操作，包括撤销和重做。

在 Vue 中，我们可以通过 `watch` 监听数据的变化，然后在数据发生变化的时候，创建一个新的操作对象，并将其添加到 `CommandManager` 中。当需要撤销操作的时候，我们只需要从 `CommandManager` 中获取最近的一个操作对象，然后调用其 `undo` 方法即可。

需要注意的是，由于 `watch` 监听器会在数据发生变化时立即执行，因此我们需要在 `CommandManager` 中实现一个缓存机制，避免操作对象重复添加到队列中。

以下是一个简单的代码示例：

class Command {
  constructor(data, oldValue) {
    this.data = data;
    this.oldValue = oldValue;
  }

  execute() {
    this.oldValue = this.data.value;
    this.data.value = this.data.newValue;
  }

  undo() {
    this.data.value = this.oldValue;
  }
}

class CommandManager {
  constructor() {
    this.commands = [];
    this.currentIndex = -1;
  }

  add(command) {
    // 如果当前操作不是最新的操作，说明需要清除之后的操作缓存
    if (this.currentIndex < this.commands.length - 1) {
      this.commands.splice(this.currentIndex + 1);
    }

    this.commands.push(command);
    this.currentIndex++;
  }

  undo() {
    if (this.currentIndex >= 0) {
      const command = this.commands[this.currentIndex];
      command.undo();
      this.currentIndex--;
    }
  }

  redo() {
    if (this.currentIndex < this.commands.length - 1) {
      this.currentIndex++;
      const command = this.commands[this.currentIndex];
      command.execute();
    }
  }
}

const cm = new CommandManager();

new Vue({
  el: '#app',
  data() {
    return {
      value: '',
    };
  },
  watch: {
    value(newValue, oldValue) {
      const command = new Command(this, oldValue);
      cm.add(command);
    },
  },
  methods: {
    undo() {
      cm.undo();
    },
    redo() {
      cm.redo();
    },
  },
});

在上面的代码中，我们创建了一个 `Command` 类表示一个操作对象，其中 `data` 表示操作的数据，`oldValue` 表示操作之前的值。`execute` 方法表示执行操作，`undo` 方法表示撤销操作。

另外，我们还创建了一个 `CommandManager` 类，用于管理所有的操作。其中 `commands` 数组表示所有的操作，`currentIndex` 表示当前执行的操作索引。`add` 方法表示添加一个新的操作，`undo` 方法表示撤销操作，`redo` 方法表示重做操作。

在 Vue 中，我们使用 `watch` 监听数据的变化，然后在数据发生变化时创建一个新的 `Command` 对象，并将其添加到 `CommandManager` 中。在需要撤销操作时调用 `CommandManager` 的 `undo` 方法，需要重做操作时调用 `CommandManager` 的 `redo` 方法。