Vue、v-if 和 v-show 哪个更好？

Question

我正在使用 Vue 2 进行项目。我需要知道在哪种情况下性能更好：使用

v-if

或

v-show

时？

我有一个很长的列表，每个项目的列表都有一个隐藏的表单，我需要显示和隐藏该表单才能单击包含每个项目列表的按钮。

哪个更好：

v-show

的切换类或使用

v-if

添加和删除表单？

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 更昂贵。

Answer 2

简短回答：

如果情况不会经常改变，请使用

v-if

。

如果您想更频繁地切换条件，请使用

v-show

。

注意：如果您的条件为 false，

v-show

不会从 DOM 中删除该元素。这样人们在检查您的页面时就可以看到它。

Answer 3

添加“v-if”的使用可能会产生意想不到的后果，因为它连接和断开元素与 DOM 的连接，而不是修改元素的显示。

例如，如果您在表单上使用它并最终使用 v-if 关闭该表单，您将收到此浏览器控制台警告：

“Form submission canceled because the form is not connected” 如果你使用'

v-show'，你就不会遇到这个问题。

Answer 4

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

Answer 5

我找到一个博客可以仔细解释你的问题：

https://learnvue.co/tutorials/v-if-vs-v-show。

根据我的经验：

使用
• v-show

  ：如果您需要频繁切换某些内容。

使用
• v-if

  ：条件在运行时不会频繁更改。

注意：如果您不想进行任何中断，表单应使用 v-show。

Answer 6

V秀

它将立即加载/渲染 DOM 中的所有元素，如果值为 false

v-show="false" 那么它将把元素的显示设置为“none”

V-如果

在满足条件之前不会加载/渲染元素，并在满足条件时渲染元素

Answer 7

v-if：添加或删除元素。 v-show：更改可见的 css 属性。

如果经常切换，v-show 更好。否则，我们使用 v-if（因为 css 会消耗初始加载时间）。