v-show 与 v-if 的异同

相同点：v-show和v-if都能控制元素的显示和隐藏。

 

不同点：

1、实现本质不同。v-if通过动态地添加、删除DOM元素；v-show仅改变display值。

 

2、编译的区别。v-show是控制css；v-if切换有一个局部的编译/卸载过程， 切换过会销毁或重建内部的事件监听和子组件

 

3、编译情况。 v-if如果初始值为false，就不会编译（懒加载）。v-show必然会编译。

 

4、性能。v-show只编译一次，之后切换其布尔值，只是控制css。而v-if是不停地销毁创建。

 

应用场景：

1、如果频繁切换某节点，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大）

2、如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）