Vue3+Milkdown+Y.js实时协作编辑器内容重复问题排查求助

针对编辑后长时间闲置（切换标签）出现内容重复的问题，从Y.js协作机制、WebSocket连接、组件生命周期三个核心方向排查：

1. WebSocket重连时的实例泄漏问题 #

这是此类重复问题的高发原因：

• 检查documentSocket.ts中的重连逻辑，确认是否在重连前销毁旧的Y.Doc和WebSocketProvider实例：

  // 错误示例：未销毁旧实例直接新建，导致多实例同步冲突
  // 正确做法：重连前清理旧资源
  if (provider) {
    provider.destroy();
    provider = null;
  }
  if (doc) {
    doc.destroy();
    doc = null;
  }
  // 再重新初始化新的Doc和Provider
  

• 查看document:open事件堆栈，确认是否每次重连都触发多次文档初始化操作，导致本地状态被重复合并。

2. Vue组件生命周期的重复绑定问题 #

切换标签触发的组件激活/休眠可能导致重复绑定：

• 检查milkdown.vue的onActivated钩子，避免切回标签时重复初始化编辑器和Y.js绑定：

  <script setup>
  import { onMounted, onUnmounted, onActivated } from 'vue';
  let editor = null;
  let provider = null;
  
  const initEditor = () => {
    // 编辑器初始化和Y.Text绑定逻辑
  };
  
  onMounted(() => initEditor());
  
  onActivated(() => {
    // 仅在编辑器未初始化时执行，避免重复绑定
    if (!editor) initEditor();
  });
  
  onUnmounted(() => {
    // 卸载时销毁实例，避免内存泄漏
    editor?.destroy();
    provider?.destroy();
  });
  </script>
  

• 确认组件休眠时是否正确解绑Y.js的事件监听，防止恢复后重复接收同步事件。

3. 后端文档实例的单例性问题 #

后端维护的Y.Doc实例重复会导致同步逻辑混乱：

• 检查documents.ts，确保每个文档ID对应唯一的Y.Doc单例：

  const docMap = new Map<string, Y.Doc>();
  
  export function getDocument(docId: string): Y.Doc {
    if (!docMap.has(docId)) {
      const newDoc = new Y.Doc();
      // 加载持久化数据（如果有）
      docMap.set(docId, newDoc);
    }
    return docMap.get(docId)!;
  }
  

• 避免客户端断开后销毁文档实例，导致重连时重新创建实例并发送旧历史操作。

4. 浏览器标签休眠的队列积压问题 #

浏览器闲置时会限制JS执行，可能导致Y.js同步操作积压：

• 可以在组件激活时（切回标签），手动触发一次状态同步校验，避免积压的操作重复应用：

  // 在onActivated中添加
  provider?.sync();
  

• 检查Y.js的gc（垃圾回收）配置，是否开启自动清理旧操作，避免冗余历史同步。

内容的提问来源于stack exchange，提问作者Giulia