v-if vs v-show

v-if和v-show都是控制元素隐藏显示的内置指令。主要讲讲不同点;

1.本质

• v-if是通过删除添加操作dom元素来实现元素的隐藏和显示；
• v-show则是通过css的display属性来实现元素的隐藏和显示；

2.编译区别

如果在组件上使用v-if和v-show,区别如下:

• v-if:当值变化时候会重新触发生命周期
• v-show:通过控制css,由false变成true不会重新触发生命周期

3.操作条件

• v-if:只有在为true时候才能操作
• v-show:任何时候都可以操作相关元素或者组件(如ref)

4.性能消耗

• v-if的切换消耗比较高,不适合频繁切换
• v-show的初始性能消耗比较高(试想一下，不管需不需要显示某元素，某元素都要一开始就被添加到页面中,v-if则是在需要时候才添加到页面上)。