保留模板注释
约 359 字大约 1 分钟
2026-03-30
思考
在 Vue 渲染模板时，如何保留模板中的 HTML 注释
在 Vue 中，Vue 模板编译时会默认移除 HTML 注释，这是出于性能考虑，减少不必要的 DOM 节点。 若需要保留注释，有以下方法。
<template>
<!-- 这个注释会被移除 -->
<div>内容</div>
</template>
<!-- 渲染结果 -->
<div>内容</div>comments 选项
Vue2 中，可以通过设置 comments 选项为 true 来保留模板中的 HTML 注释。
<script>
export default {
data() {
return {
count: 10,
};
},
comments: true,
};
</script>
<template>
<div class="counter">
<!-- 显示计数器 -->
<p>计数：{{ count }}</p>
</div>
</template>v-pre 指令
v-pre 指令可以跳过该元素及其所有子元素的编译，使其按照原样渲染。因此，在 v-pre 元素内的注释也会被保留。
<template>
<span v-pre>
<!-- 注释将会被保留 -->
<div>内容</div>
</span>
</template>特殊注释
在 Vue3 中，可以使用特殊的注释方式 <!-- [COMMENTS] --> 来保留模板中的注释。
<template>
<span>
<!-- [COMMENTS] 注释将会被保留-->
<div>内容</div>
</span>
</template>提示
移除模板中的注释，是 Vue 为了减小应用体积于性能的考虑而进行的编译后的结果。在编译过程中，注释节点会被过滤掉，不会出现在最终生成的渲染函数中。 因此，模板中存在 HTML 注释，在开发阶段不会被删除。