我在互联网上的 Vuetify 文档或代码 sn-ps 中看到了不同的示例，这些示例引用了 Vuetify 断点或 CSS 帮助类来标记对屏幕大小反应的元素。
是否有标准或推荐的做法，甚至是小的性能差异来确定我应该何时使用其中一种？
例如：
<p v-if="$vuetify.breakpoint.hiddenMdAndUp">...</p>
// vs
<p class="hidden-md-and-up">...</p>
【问题讨论】：
标签： javascript html css vue.js vuetify.js
CSS 助手类完全依赖于浏览器及其对媒体查询的处理。
我敢打赌，它比一段总是在v-if 后面的 javascript 快得多。
此外，如果你真的需要使用一段 javascript 来使某些元素可见或隐藏，在 Vue 中最好使用 v-show（它使用元素的 display 属性而不是从 DOM 中添加/删除正如v-if 所做的那样）。请参阅spec 详细信息。
【讨论】：
v-if 是任何“重”组件的首选 - 添加大量嵌套 DOM 元素或运行任何重要的组件（例如繁重的计算、API电话等）？尽管应该使用v-show 和最好的 CSS 来隐藏/显示简单的组件，但它们不会停止挂载和创建的生命周期以及后续的侦听器和函数调用。
v-if 本质上是一个繁重的操作（它与 DOM 一起操作）。在 DOM 中添加/删除重型组件比显示/隐藏它们更有效。因此，当频繁触发组件的可见性时，您必须使用v-show/CSS。例如，您想通过单击显示/隐藏链接来显示/隐藏某些内容。但是v-if 可以避免在触发可见性的条件很少时向 DOM 添加一些不必要的东西。例如，只有当您是管理员时才可见组件（仅在重新登录时触发可见性）。