vue3使用monaco editor踩坑记——getValue()导致页面卡住

vue3 使用monaco editor踩坑记——getValue()导致页面卡住

最近开始在实验室打工，需要调研代码编辑器，我在网上经过查找决定使用monaco editor，但是在vue3的环境下狠狠地踩坑了！！！每次调用getValue()获取编辑器内容都卡住！

前端框架

使用Vue，版本为@vue/cli 4.5.14

安装

npm install monaco-editor@0.27.0 --save // 此版本亲测有效
npm install monaco-editor-webpack-plugin --save 

使用

可以直接在component中导入使用，不需要在main.js引入

// 某个component页面
<div id="codeEditBox"></div>

// script 标签中
import * as monaco from 'monaco-editor'
import { ref } from 'vue'
import $ from 'jquery'
export default{
  setup() {
    const editor = ref(null)
    const initEditor = () => {
      // 初始化编辑器，确保dom已经渲染
      editor.value = monaco.editor.create(document.getElementById('codeEditBox'), {
        value: '', //编辑器初始显示文字
        language:'java', //语言支持自行查阅demo
        theme:'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
        selectOnLineNumbers: true,//显示行号
        roundedSelection: false,
        readOnly: false, // 只读
        cursorStyle: 'line', //光标样式
        automaticLayout: false, //自动布局
        glyphMargin: true, //字形边缘
        useTabStops: false,
        fontSize: 18, //字体大小
        autoIndent:true, //自动布局
        quickSuggestionsDelay: 100, //代码提示延时
      });
      // 监听值的变化
      editor.value.onDidChangeModelContent((event) => {
        console.log(event)
      });
    }
    $(document).ready(function () {
      initEditor()
    })
    const getVal = () => {
      return editor.value.getValue(); //获取编辑器中的文本
    }
    return {
      editor,
      getVal
    }
  },
}

// style 标签中
#codeEditBox {
  width:100%;
  height:200px;
}

运行

前端确实是顺利运行了，而且没有报错，也可以在代码编辑器中输入，但是每次调用getVal()方法就卡住

const getVal = () => {
	return editor.value.getValue(); //获取编辑器中的文本
}

排错 + 解决

一开始我感觉可能是安装的 monaco-editor 和 monaco-editor-webpack-plugin 版本的问题，但是经过不停换版本，发现应该不是这个问题。
最后认为是vue3的问题，网上使用monaco-editor都是在vue2的环境下，最后阅读官网发现确实是这个地方出了问题。

修改

// script 标签中
import { toRaw } from 'vue'
const getVal = () => {
	return toRaw(editor.value).getValue(); //获取编辑器中的文本
}

使用Vue3的toRaw()，拿到原始数据，对原始数据进行修改，不会被追踪，不会更新UI界面~