vue CodeMirror 使用setValue存在的问题

### 集成和使用 CodeMirror #### 安装依赖包 为了在 Vue3 项目中集成 CodeMirror，首先需要安装 `codemirror` 和其他必要的扩展库。可以通过 npm 来安装这些依赖项： ```bash npm install codemirror ``` 这一步骤确保了项目的 node_modules 文件夹内包含了 Codemirror 及其相关资源[^3]。 #### 创建组件并引入基本配置 创建一个新的 Vue 组件来封装 CodeMirror 实例，并对其进行初始化设置。下面是一个简单的例子展示如何定义这个自定义组件： ```javascript // components/CodeEditor.vue <template> <div class="editor"> <!-- 这里放置实际的编辑区域 --> <textarea ref="textArea"></textarea> </div> </template> <script setup lang='ts'> import { onMounted, ref, watchEffect } from 'vue'; import CodeMirror from 'codemirror'; const props = defineProps({ code: String, }); let editorInstance; const textArea = ref(null); onMounted(() => { // 初始化 CodeMirror 编辑器实例 editorInstance = CodeMirror.fromTextArea(textArea.value, { lineNumbers: true, mode: "javascript", // 设置默认的语言模式 theme: "default" // 默认的主题样式 }); // 将父级传递下来的初始代码值赋给编辑器 editorInstance.setValue(props.code); // 监听 prop 的变化以更新编辑器中的内容 watchEffect(() => { if (props.code !== editorInstance.getValue()) { editorInstance.setValue(props.code); } }); }); </script> ``` 这段代码展示了如何在一个名为 `CodeEditor.vue` 的单文件组件中嵌入 CodeMirror 并对其做基础配置[^4]。 #### 使用组件于页面布局 接下来，在主应用或其他任何地方注册此组件，并通过属性绑定的方式向它传入一些参数比如预设代码字符串等信息： ```html <!-- App.vue 或者其他的 .vue 文件 --> <template> <div id="app"> <h1>Markdown Editor Example</h1> <CodeEditor :code="initialContent"/> <button @click="logCurrentText">Log Current Text</button> </div> </template> <script setup lang='ts'> import { ref } from 'vue'; import CodeEditor from './components/CodeEditor.vue'; const initialContent = ref(`# Welcome to my markdown editor`); const logCurrentText = () => { console.log(editorRef.value.editor.getValue()); }; </script> ``` 上述模板说明了怎样把之前创建好的 `CodeEditor` 放置到应用程序视图结构之中，并提供了一个按钮用于获取当前编辑区内的文本内容。 #### 主题与语言支持 对于希望更改外观风格或是增加不同编程语言高亮显示的支持来说，则可以访问位于 `node_modules/codemirror/theme/` 下面的不同 CSS 文件以及 `mode/` 文件夹下的 JavaScript 文件来进行相应调整[^2]。