Vue 渲染模板时怎么保留模板中的HTML注释

在 Vue（包括 Vue 2 和 Vue 3）中，模板中的 HTML 注释默认不会被渲染到最终的 DOM 中，这是 Vue 编译器的行为。它会忽略掉模板中的 <!-- ... --> 注释，只渲染实际的 DOM 元素。

问题背景示例：

<template>
  <div>
    <!-- 这是注释 -->
    <p>内容</p>
  </div>
</template>

实际渲染后：

<div>
  <p>内容</p>
</div>

注释不在 DOM 中。

如何“保留”注释（解决方案）

方法 1：使用特殊写法通过 v-html 插入注释（变通方式）

<template>
  <div v-html="htmlWithComment"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlWithComment: `<!-- 这是注释 --><p>内容</p>`
    };
  }
};
</script>

渲染结果：

<div>
  <!-- 这是注释 -->
  <p>内容</p>
</div>

警告：使用 v-html 会造成 XSS 安全风险，请确保注入内容是可信的！

方法 2：运行时手动添加 DOM 注释（JS 方式）

<template>
  <div ref="container">
    <p>内容</p>
  </div>
</template>

<script>
export default {
  mounted() {
    const comment = document.createComment('这是注释');
    this.$refs.container.insertBefore(comment, this.$refs.container.firstChild);
  }
};
</script>

渲染结果：

<div>
  <!-- 这是注释 -->
  <p>内容</p>
</div>

方法 3：在服务端保留（仅适用于 SSR）

如果你使用的是 Nuxt.js 或 Vue SSR，可以控制服务端是否输出注释，但客户端接管时仍可能被 Vue 清除，不推荐依赖注释传输结构信息。

Vue 中不可能实现的：

<!-- 不可能让 Vue 编译后保留这里的注释 -->

Vue 编译器在编译模板时会直接忽略 HTML 注释节点。

总结

方法	是否保留注释	是否推荐
模板中直接写注释	❌ 不保留	默认行为，不建议依赖
v-html 插入注释	✅ 可保留	⚠️ 需防范 XSS
JS 手动插入注释	✅ 可保留	推荐方式
SSR 输出注释	✅ 有条件支持	不稳定，易被 Vue 清除