什么是更好的un vue.js 2,使用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。

注意：如果您的条件为假，v-show不会从DOM中删除该元素。这样，当人们使用Firebug检查您的页面时，便可以看到它。

Answer 3

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

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

    “Form submission canceled because the form is not connected”

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