v-show和v-if都是用来显示/隐藏元素,v-if还有一个v-else配合使用,两者达到的效果都一样,但是v-if更消耗性能的,因为v-if在显示隐藏过程中有DOM的添加和删除,v-show就简单多了,只是操作css。
初始操作不同:
v-if在条件为真的时候,才会创建DOM节点,如果在初始渲染时条件为假,则什么也不做,页面当作没有这些元素——直到条件第一次变为真时,才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,也就是标签都会添加到DOM中,并且只是简单地基于 CSS 进行切换。
元素显示/隐藏的原理不同:
v-if根据条件渲染元素,条件为真的时候才会在页面中添加这个元素,一旦不满足条件,元素及它的数据绑定 / 组件被销毁。
v-show中添加真假切换的时候,对元素进行动态添加或取消“display:none”进行显示切换的。可以说只是改变css的样式,几乎不会影响什么性能。
适用场景不同:
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。