Vue3 中 v-html 的使用

一、基础用法

v-html 指令可以直接将字符串渲染为 HTML 内容，其用法可以十分简单：

<template>
  <div v-html="htmlContent"></div>
</template>
<script>
export default {
  data() {
    return {
      htmlContent: "<p>献给所有为了梦想狂奔的人</p>"
    }
  }
}
</script>

上面的例子中，我们将 data 中的 htmlContent 赋值为一个包含 p 标签的字符串，使用 v-html 渲染到页面中。

二、安全考虑

然而直接使用 v-html 渲染 HTML 字符串有可能会造成安全问题。如果字符串中包含有恶意的代码，那么很有可能会导致 XSS（跨站脚本攻击）风险。因此在 v-html 使用过程中，需要注意一些安全问题。 Vue 3 中提供了一个新的 API：createVNode，可以用于创建虚拟节点，它可以帮助我们更好地渲染动态内容。下面举一个例子，介绍如何在使用 v-html 的同时保证安全性：

<template>
  <div :innerHTML="rawHtml"></div>
</template>
<script>
import { createVNode } from 'vue';
export default {
  data() {
    return {
      htmlContent: "<script>alert('malicious code')</script>"
    }
  },
  computed: {
    rawHtml() {
      const tmp = document.createElement('div');
      tmp.innerHTML = this.htmlContent;
      const childNodes = Array.from(tmp.childNodes).map(node => {
        return node.nodeType === 3 // text node
          ? createVNode('template', null, { default: () => node.textContent })
          : createVNode(node.tagName, null, null, null, Array.from(node.attributes), null, Array.from(node.childNodes).map(n => this.rawHtml(n)));
      });
      return createVNode('div', null, childNodes);
    }
  }
}
</script>

通过上面的代码，我们可以将字符串通过 createVNode 来创建虚拟节点，从而避免了直接将字符串渲染到 DOM 中的安全问题。

三、结语

通过本文的讲解，我们可以发现 v-html 指令在 Vue 开发中可以起到十分便捷的作用。但是在使用时需要注意一些安全问题。通过结合 createVNode API 的使用，我们可以更好地渲染动态 HTML 内容，使代码更加健壮、安全。