深圳网站建设设计定做,免费做ppt网站,网站开发电脑,文化推广网站建设心得最近在项目中使用到了monaco-editor来实现相关的业务功能#xff0c;按照官方使用方法进行了相关操作#xff0c;但是在使用的时候#xff0c;总是会导致创建多个编辑器实例#xff0c;导致页面卡死的情况#xff0c;下面来看看怎么处理这种情况吧#xff0c;先说一下我使…最近在项目中使用到了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)}
})通过toRaw处理之后我们可以获取到原始对象将对应的值赋值正常显示 除此以外我们还需要在组件卸载时清空对应的编辑器实例以减少不必要的性能浪费
