Vue.js 禁用空白注释答案

【问题标题】：Vue.js disable blank commentsVue.js 禁用空白注释
【发布时间】：2021-08-17 10:23:23
【问题描述】：

通常，当 Vue.js 通过 v-if 隐藏元素时，会在其位置留下注释。

Vue 文件：

<div v-if="true">Hello</div>
<div v-if="false">world</div>

输出：

<div v-if="true">Hello</div>
<!--  -->

是否可以禁用此评论的出现？

期望的输出：

<div v-if="true">Hello</div>

【问题讨论】：

你试图摆脱这个的原因是什么？是因为你最终得到了一长串 cmets 还是什么？如果您有很长的v-if 列表，那么最好只使用computed 并动态显示您想要显示的项目，那么您最终不会得到任何 cmets
@maxshuty 原因：客户端上的代码更漂亮。我真的很想摧毁它们并将它们还原为原子。他们真的很丑。
当然，但是您的客户并没有在开发工具中查看您的代码，如果是的话，那么事情应该已经被缩小和丑化了：P Evan 您已经评论过这个主题：github.com/vuejs/vue/issues/5117 -它实际上有助于vnode diffing 拥有它们...
@maxshuty，在本期中发现了有趣的solution。感谢您的帮助。

【解决方案1】：

vuejs repo 中有一个issue。我认为有用的 cmets 之一说：

v-if 通常用于节点结构相对稳定的元素，将其渲染为空注释标签使得 vnode 列表更有效，因为列表更“稳定”，并且它避免了元素没有键控时的一些边缘情况.在您的情况下，除了小检查烦恼之外，它似乎不会引起任何实际问题，所以很遗憾，我认为我们不会改变这种行为。

对于虚拟滚动列表，使用计算属性返回需要呈现的项目的子集可能是一个更好的主意，例如v-for="item in displayedItems" 而不是在每个项目上使用 v-if。

【讨论】：