问题描述
我在使用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-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有什么更好的选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!