单页面多Monaco Diff Editor实例仅第一个显示diff高亮问题求助

问题根因 #

• 存在竞态冲突：当前每个组件实例初始化时都会单独触发monaco的异步加载，虽然ES动态import本身是模块单例，但monaco首次加载时会执行全局环境初始化、样式注入等操作，多个实例并行触发加载逻辑时，会导致后续实例的初始化干扰全局环境，出现diff模型绑定失败、高亮不渲染的问题。
• 资源未正确释放：组件销毁时没有手动销毁编辑器实例和对应的文本模型，残留的全局注册资源会导致新实例的模型绑定异常。

修复方案 #

步骤1：将monaco加载改为全局单例模式 #

在组件模块顶层定义全局共享的加载逻辑，避免重复初始化：

// 组件script顶层定义，所有组件实例共享
let monaco = null;
let monacoLoadPromise = null;

// 单例加载方法，全局仅执行一次初始化
const loadMonaco = () => {
  if (monacoLoadPromise) return monacoLoadPromise;
  monacoLoadPromise = import('../../../lib/monaco-editor').then(module => {
    monaco = module;
    return monaco;
  });
  return monacoLoadPromise;
};

修改原有importMonacoPackage方法：

methods: {
  async importMonacoPackage() {
    monaco = await loadMonaco();
  },
}

步骤2：添加组件销毁时的资源释放逻辑 #

新增beforeDestroy钩子，手动清理编辑器资源：

beforeDestroy() {
  if (!this.diffEditor) return;
  // 销毁编辑器实例
  this.diffEditor.dispose();
  // 销毁绑定的两个文本模型
  const diffModel = this.diffEditor.getModel();
  if (diffModel) {
    diffModel.original.dispose();
    diffModel.modified.dispose();
  }
  this.diffEditor = null;
}

步骤3：为文本模型指定唯一URI（可选，避免模型冲突） #

创建文本模型时传入唯一标识的URI，避免多实例模型冲突：

// 用Vue组件自带的唯一_uid生成唯一URI
const originalModel = monaco.editor.createModel(
  this.versions[0].code,
  MonacoHelper.markdownLangToMonacoLang(this.versions[0].lang),
  monaco.Uri.parse(`diff-original-${this._uid}.${this.versions[0].lang}`)
);
const modifiedModel = monaco.editor.createModel(
  this.versions[1].code,
  MonacoHelper.markdownLangToMonacoLang(this.versions[1].lang),
  monaco.Uri.parse(`diff-modified-${this._uid}.${this.versions[1].lang}`)
);

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