编辑器在 Vue3 引用对象中使用 getValue 或 setValue 时卡住

Question

当我在 Vue3 中使用 monaco-editor 时，当我在编辑器的反应对象上调用 getValue 或 setValue 时，编辑器会卡住。

如果我不调用getValue或setValue，编辑器工作正常，但我无法获取编辑器的值。

<template>
  <div class="editor" ref="editorRef"></div>
</template>

<script setup lang="ts">
import * as monaco from 'monaco-editor'

const code = ref('')
const editorRef = ref<HTMLDivElement | null>(null)
const editor = ref<monaco.editor.IStandaloneCodeEditor | null>(null)

onMounted(() => {
  editor.value = monaco.editor.create(editorRef.value!, {
    value: code.value,
    language: 'javascript'
  })

  editor.value.getModel()?.onDidChangeContent(() => (code.value = editor.value?.getValue() || ''))
})
</script>

我尝试使用Vue3提供的toRaw API从引用对象中获取原始对象，幸运的是它成功了！

const originEditor = toRaw(editor)
originEditor.getValue() // 'Hello, World!'
orifinEditor.setValue('Hello, Monaco!') // success

我想知道这两种方式有什么区别：

editor.value.getValue() // editor stucked
originEditor.getValue() // work well