在vue.js 2中，使用v-if或v-show有什么更好的选择? [英] What is better in vue.js 2, use v-if or v-show?

问题描述

我在使用vue 2的项目中工作.我需要知道哪种情况下性能会更好:使用v-if或v-show?.我的清单很长，每个项目的列表都有一个隐藏的表单，我需要显示该表单并隐藏以单击包含每个项目列表的按钮.最好使用v-show切换类或使用v-if添加和删除表单?

I'm working in a project with vue 2. I need to know in which case the performance is better: Use v-if or v-show?. I have a long list and each item's list has a form hidden that I need show and hide to click a button that has each item list. What is better a toggle class of v-show or add and remove the form with v-if?

推荐答案

tl; dr

假设问题完全与性能有关:

tl;dr

Assuming the question is strictly about performance:

• v-show :昂贵的初始负载，廉价的切换
• v-if :便宜的初始负载，昂贵的切换.

• v-show: expensive initial load, cheap toggling,
• v-if: cheap initial load, expensive toggling.

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

Evan You provided a more in depth answer at VueJS Forum

v-show总是编译并呈现所有内容-它只是添加了"display:none".元素的样式.它具有较高的初始负载成本，但切换非常便宜.

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.

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

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.

这篇关于在vue.js 2中，使用v-if或v-show有什么更好的选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！