vue-codemirror 内容懒加载

vue-codemirror是一个基于Codemirror5的Vue组件，用于实现代码编辑器。它支持内容懒加载，可以通过设置lazy属性来实现。当lazy属性设置为true时，组件将不会在初始化时渲染Codemirror实例，而是在组件第一次被激活时才会进行渲染。这样可以提高页面的加载速度和性能。

以下是一个示例代码，演示了如何在vue-codemirror中实现内容懒加载：

<template>
  <div>
    <button @click="showEditor = true">Show Editor</button>
    <div v-if="showEditor">
      <vue-codemirror
        v-model="code"
        :options="{
          mode: 'javascript',
          lineNumbers: true,
          theme: 'material',
          lazy: true // 开启内容懒加载
        }"
      />
    </div>
  </div>
</template>

<script>
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import 'codemirror/mode/javascript/javascript.js'

export default {
  components: {
    VueCodemirror
  },
  data() {
    return {
      showEditor: false,
      code: ''
    }
  }
}
</script>

在上面的代码中，我们在vue-codemirror组件的options属性中设置了lazy为true，这样组件就会在第一次被激活时才会进行渲染。当用户点击“Show Editor”按钮时，showEditor属性会被设置为true，从而触发vue-codemirror组件的渲染。