【Vue3】vue3+monaco 使用中遇到的一些问题

1.monaco光标错位

这里所指的光标错位 是点击和实际出现的位置不符合

如图所示 可见光标的输入和实际的代码区域相差真的是甚远
一开始苦恼了很久 布局和生命周期等各种方法都试过了 依然没有解决问题 最后突然想起一件事 有没有可能不是鼠标点击事件或者布局的问题 而是文字本身的位置有问题呢？

结果还真让我抓到犯罪嫌疑人了

将其中的text-align:center关闭之后 惊喜的发现

光标位置正常了 有一种感觉整个世界都神金了的感觉
解决办法就很简单了 使用css样式将绑定的编辑器盒子的text-align样式覆盖即可 设置为text-align:left

2.获取monaco用户输入时页面卡死

具体来说 当使用ref来保存editor的引用的时候 获取editor输入框的值会直接卡死 页面无响应

具体代码如下

<template>
    <div ref="editorRef" style="height:500px;width:500px;"></div>
    <h1>{{ showInput }}</h1>
    <button @click="updateInput">获取输入</button>
  </template>
  
  <script setup>
  import * as monaco from 'monaco-editor';
  import { onMounted } from 'vue';
  import { ref } from 'vue';

  const showInput=ref('');
  const editorRef=ref(null);
  const editor=ref(null);//替换为let editor=null;
  onMounted(()=>{
  //替换为editor=monaco.editor.create(editorRef.value,{
    editor.value=monaco.editor.create(editorRef.value,{
    value: '<h1>Hello</h1>',
    language: 'html',
    theme: 'vs-dark',
  });
  });

  const updateInput=()=>{
    console.log('我执行了');
    //替换为showInput.value=editor.getModel().getValue();
    showInput.value = editor.value.getModel().getValue();
    console.log('我结束了');
  }
  </script>

原因不明 毕竟我是个臭后端 但是将ref替换为let 则可以避免此问题
更改之后 可以看到 不再存在卡死的情况了 推测是ref带来的响应式更新拖垮了性能 导致页面卡死