monaco在使用中直接呼叫codeEditor.value會卡死

justlearn發表於2024-07-24
今天在整合monaco編輯器中透過codeEditoer.value標籤屬性值的時候頁面卡死,經檢測需要toRaw()獲取原生屬性值可以修復
<div id="code-editor" ref="codeEditorRef" style="min-height: 400px" />
onMounted(() => {
if (!codeEditorRef.value) {
return;
}

// Hover on each property to see its docs!
codeEditor.value = monaco.editor.create(codeEditorRef.value, {
value: value.value,
language: "java",
automaticLayout: true,
colorDecorators: true,
minimap: {
enabled: true,
},
readOnly: false,
theme: "vs-dark",
});

// 編輯 監聽內容變化
codeEditor.value.onDidChangeModelContent(() => {
value.value = toRaw(codeEditor.value).getValue();
});
});

相關文章