当前位置：首页 > news >正文

解决在Vue3中使用monaco-editor创建多个实例的导致页面卡死的问题

news 2025/7/18 18:12:26

最近在项目中使用到了monaco-editor来实现相关的业务功能，按照官方使用方法进行了相关操作，但是在使用的时候，总是会导致创建多个编辑器实例，导致页面卡死的情况，下面来看看怎么处理这种情况吧，先说一下我使用的技术栈，主要是以Vue3为主的技术
在这里插入图片描述

以上是项目的主体页面，主要分为四个部分，其中第一二四块主要使用了JSON Schema的相关语法，主要目的是为了生成第三块的表单内容，一二四块使用的是基于monaco-editor封装的编辑组件，在该组件内部，根据文档提示：
https://novaalone.github.io/monaco-editor-doc-zh/guide/start.html
定义了相关的monaco-editor实例对象

onMounted(() => {if (editorRef.value !== null) {editor.value = Monaco.editor.create(editorRef.value as HTMLElement, {value: props.code,language: "json",theme: "vs-dark",readOnly: props.readOnly,formatOnPaste: true,tabSize: 2,minimap: {enabled: false}, // 是否启用预览图acceptSuggestionOnEnter: "on",autoClosingBrackets: "always", // 是否自动添加结束括号(包括中括号)autoClosingQuotes: "always", // 是否自动添加结束的单引号 双引号autoIndent: "brackets", // 是否自动缩进folding: true, // 是否启用代码折叠links: true, // 是否点击链接scrollBeyondLastLine: false //设置编辑器是否可以滚动到最后一行之后})} else {console.error("editorDom is not a DOM element")}
})

但是在使用的过程中发现每次进入页面总会重复创建相关的编辑器实例，导致编辑器除首次进入外正常显示数据，在之后页面切换后再进入会导致编辑器没有数据，经过查询资料，发现问题如下

monaco-editor这个包的时间比较久，与其比较适配的应当是Vue2技术栈
在最开始的开发中，定义响应式对象来接收编辑器数据的值，但是编辑器实例需要使用原生对象来接收
在Vue3中，我们可以使用toRaw()方法来获取响应对象的原生对象，相关文档以及使用实例如下
https://cn.vuejs.org/api/reactivity-advanced.html#toraw

const editor = ref(null)
let models = null
watchEffect(() => {debuggerif (editor.value && props.code) {models = toRaw(editor.value).getModel()debuggermodels?.setValue(props.code)}
})