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

Question

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

Answer 1

tl;dr

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

• v-show:昂贵的初始加载，便宜的切换，
• v-if:初始加载成本低，切换成本高。

---

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

v-show always compiles and renders everything - it simply adds the "display: none" style to the element. It has a higher initial load cost, but toggling is very cheap.

Incomparison, v-if is truely conditional: it is lazy, so if its initial condition is false, it won't even do anything. This can be good for initial load time. When the condition is true, v-if will then compile and render its content. Toggling a v-if block actually tearsdown everything inside it, e.g. Components inside v-if are acually destroyed and re-created when toggled, so toggling a huge v-if block can be more expensive than v-show.