我正在使用 vue 2 进行项目。我需要知道在哪种情况下性能更好：使用 v-if 还是 v-show？。 我有一个很长的列表，每个项目的列表都有一个隐藏的表单，我需要显示和隐藏以单击包含每个项目列表的按钮。 使用 v-show 切换类或使用 v-if 添加和删除表单哪个更好？
【问题讨论】：
标签： javascript performance components vue.js vuejs2
假设问题完全是关于性能的：
Evan You 在 VueJS 论坛上提供了更深入的回答
v-show 总是编译和渲染所有东西——它只是简单地给元素添加“display: none”样式。它具有较高的初始加载成本，但切换非常便宜。
相比之下，v-if 是真正有条件的：它是惰性的，所以如果它的初始条件为假，它甚至什么都不做。这对于初始加载时间可能很好。当条件为真时，v-if 将编译并渲染其内容。切换 v-if 块实际上会拆除其中的所有内容，例如v-if 中的组件在切换时会被实际销毁并重新创建，因此切换巨大的 v-if 块可能比 v-show 更昂贵。
【讨论】：
简答：
如果条件不会经常变化，请使用v-if。
如果您想更频繁地切换条件，请使用v-show。
注意：如果您的条件为假，v-show 不会从 DOM 中删除元素。这样人们在检查您的页面时就可以看到它。
【讨论】：
添加 'v-if' 的使用可能会产生意想不到的后果，因为它将元素与 DOM 连接和断开连接，而不是修改元素的显示。
例如，如果您在表单上使用它并最终关闭该表单使用 v-if，您将收到以下浏览器控制台警告：
“Form submission canceled because the form is not connected”
如果你使用'v-show'，你就不会遇到这个问题。
【讨论】：
v-show 只是切换 CSS 的 display 属性（“none”或“block”）。
当我们使用v-show 时，HTML DOM 将仅在页面上（带有“display”属性）。
但是如果我们使用v-if，它会从页面中删除整个 DOM 或根据条件重新创建整个 DOM。
检查这个例子。
<p v-if="ok">If Check</p>
<p v-show="ok">Show Check</p> //try to set "ok" by true and false and inspect HTML
【讨论】：
V-show
它会一次加载/渲染 DOM 中的所有元素，如果值为 false v-show="false" 然后它将元素的显示设置为“无”
V-if
在满足条件之前不会加载/渲染元素，并在满足条件时渲染元素
【讨论】：
v-if：添加或删除您的元素。
v-show：更改可见的 css 属性。
如果经常切换，v-show 更好。否则，我们使用 v-if（因为 css 花费了初始加载时间）。
【讨论】：