关于monaco-editor的卡死问题

如果你能正常显示monaco-editor，但是出现了卡死，那一定是因为在改变内容的值的时候没有使用toRaw(xxx)

背景：

    <transition name="el-zoom-in-bottom">
      <router-view></router-view>
    </transition>

其中monaco-editor在router-view中，而router-view被transition标签嵌套，transition使用的过渡效果使路由页面切换到monaco-editor导致渲染问题而卡死

解决办法1：

在挂载monaco-editor的时候，需要设置一个滞后时间，使用setTimeout来延迟创建monaco-editor，设置的时间看浏览器的性能，100ms一般来说足够，太长了可能会影响交互体验

setTimeout(() => {
    codeEditor.value = monaco.editor.create(codeEditorRef.value, {
      value: props.value,
      language: props.language,
      automaticLayout: true,
      colorDecorators: true,
      minimap: {
        enabled: true,
      },
      readOnly: false,
      theme: "vs-dark",
      lineNumbers: "off",
      roundedSelection: false,
      scrollBeyondLastLine: false,
    });
    codeEditor.value.onDidChangeModelContent(() => {
      props.handleChange(toRaw(codeEditor.value).getValue());
    });
  },100)

解决办法2：

经过多次研究，发现其他的过渡效果不会导致卡死，最后发现是过渡效果中的

  transform: scaleY(0);

导致了卡死，可能是因为monaco失去了高度导致了渲染逻辑出错

如果要使用el-zoom-in-bottom的过渡效果，查看el-zoom-in-bottom的源码，然后自定义一个效果，把其中的transform: scaleY(0)中的0改成一个非0值即可完美解决

el-zoom-in-bottom源码：

.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}