在Vue中如何定义变量并应用于自定义代码编辑器的预览功能

问题根因 #

1. 你将htmlandcss定义在data中，data仅会在组件初始化时执行一次计算，后续htmlCode、cssCode更新时htmlandcss不会自动同步，因此预览区内容不会联动更新。
2. 直接拼接CSS代码到HTML内容后无法生效，CSS必须包裹在<style>标签中才会被浏览器解析为样式规则。
3. 当前写法无法执行JS代码：Vue的v-html指令出于安全限制，不会执行插入内容中的<script>标签。

修复方案 #

第一步：实现HTML+CSS预览效果

删除data中的htmlandcss定义，改为计算属性，计算属性会自动监听依赖的响应式变量变化，自动更新返回值：

<script>
export default {
  name: "CodeEditor",
  data() {
    return {
      htmlCode: '<h1>hi</h1>',
      cssCode: '',
      jsCode: ''
    }
  },
  computed: {
    htmlandcss() {
      // 将CSS代码包裹在style标签后再拼接
      return `${this.htmlCode}<style>${this.cssCode}</style>`
    }
  }
};
</script>

修改后即可实现你预期的h1标题渲染效果，且修改HTML、CSS代码时预览区会自动同步。

进阶：支持JS代码执行+样式隔离

如果需要支持JS代码运行，建议改用iframe承载预览内容，既可以解决JS执行问题，还能避免预览区代码和当前Vue项目的样式、逻辑冲突：

1. 修改模板中预览区的代码：

<div id="preview" class="grid-cell">
  <iframe ref="previewIframe" frameborder="0" width="100%" height="300"></iframe>
  <div class="title">This is a cell</div>
</div>

2. 新增监听逻辑和更新预览的方法：

<script>
export default {
  name: "CodeEditor",
  data() {
    return {
      htmlCode: '<h1>hi</h1>',
      cssCode: '',
      jsCode: ''
    }
  },
  watch: {
    // 三个代码变量任意变化都触发预览更新
    htmlCode: {
      handler: 'updatePreview',
      immediate: true // 初始化时立刻执行一次渲染
    },
    cssCode: 'updatePreview',
    jsCode: 'updatePreview'
  },
  methods: {
    updatePreview() {
      const iframe = this.$refs.previewIframe
      const doc = iframe.contentDocument || iframe.contentWindow.document
      // 拼接完整的独立HTML文档
      const previewContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <style>${this.cssCode}</style>
        </head>
        <body>
          ${this.htmlCode}
          <script>${this.jsCode}</script>
        </body>
        </html>
      `
      doc.open()
      doc.write(previewContent)
      doc.close()
    }
  }
};
</script>

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