Vue中v-if和v-show指令的共同点和不同的?
- 相同点:
v-show和v-if都能控制元素的显示和隐藏 - 不同点
实现本质方法不同:
v-show的本质是通过设置css中的display设置为none,控制隐藏
v-if是动态向DOM树内添加或者删除DOM元素。 - 适用场景:
如果要频繁切换某节点时,使用 v-show(无论 true 或者 false 初始都会进行渲染,此后通过 css 来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用 v-if(因为懒加载,初始为 false 时,不会渲染,但是因为它是通过添加和删除 dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)。