vue.js 2 中哪个更好，使用 v-if 还是 v-show？

Question

我在一个使用 vue 2 的项目中工作。我需要知道在哪种情况下性能更好：使用 v-if 或 v-show？。我有一个长列表，每个项目的列表都有一个隐藏的表单，我需要显示和隐藏它才能单击包含每个项目列表的按钮。 v-show 的切换类或使用 v-if 添加和删除表单哪个更好？

原文由 Jedidias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

tl;博士

假设问题完全是关于性能的：

• v-show ：昂贵的初始加载，便宜的切换，
• v-if ：便宜的初始加载，昂贵的切换。

---

Evan You 在 VueJS 论坛上提供了更深入的答案

v-show 总是编译并渲染所有内容——它只是将“display: none”样式添加到元素中。它具有较高的初始加载成本，但切换非常便宜。

相比之下，v-if 是真正有条件的：它是惰性的，所以如果它的初始条件为假，它甚至不会做任何事情。这对于初始加载时间可能有好处。当条件为真时，v-if 将编译并呈现其内容。切换一个 v-if 块实际上会拆除其中的所有内容，例如 v-if 中的组件在切换时实际上被破坏并重新创建，因此切换一个巨大的 v-if 块可能比 v-show 更昂贵。

原文由 bypatryk 发布，翻译遵循 CC BY-SA 4.0 许可协议