Vue挂载关联容器时CodeMirror变为只读的问题如何解决

• 你在Vue的created生命周期钩子中初始化CodeMirror，此时Vue尚未完成目标容器.container的DOM挂载，你获取到的textarea属于初始静态DOM节点
• 后续Vue完成挂载流程时，会重新渲染.container内的所有DOM结构，直接替换掉你之前绑定了CodeMirror的textarea节点，导致CodeMirror实例关联的DOM脱离文档流，就会表现为无法编辑的只读状态
• 当你把el改为不存在的container1时，Vue不会执行挂载操作，不会重写容器内的DOM，CodeMirror的绑定自然可以正常生效

调整CodeMirror的初始化时机到mounted钩子，该生命周期触发时Vue已经完成了DOM挂载，此时操作的DOM不会被Vue的默认渲染流程覆盖。
同时可以给CodeMirror控制的区域添加v-pre指令，告知Vue无需解析该区域内容，避免意外重绘影响CodeMirror运行；不需要响应式的editor实例可以挂载到this.$options上，避免不必要的响应式劫持。

修复后的代码如下：

<div class="container">
    <div class="row">
      <div class="col-md-2" v-pre>
        <textarea id="code"><h1>hi</h1></textarea>
      </div>   
    </div>
  </div>
  
  <script>
      var vue  = new Vue( 
      {
        el : ".container",
        mounted() {
          this.$options.editor = CodeMirror.fromTextArea(document.getElementById('code'), {lineNumbers: true, mode:"htmlmixed"});
        },
        beforeDestroy() {
          // 组件销毁时清理CodeMirror实例，避免内存泄漏
          if(this.$options.editor) {
            this.$options.editor.toTextArea()
            this.$options.editor = null
          }
        }
      })
  </script>

后续需要操作编辑器实例时，直接访问vue.$options.editor即可。

内容的提问来源于stack exchange，提问作者Darren Oakey