v-if和v-show的异同点

相同点

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

不同点

1.实现方法
v-if：动态的向DOM树内添加或者删除DOM元素
v-show：通过设置css中的display设置为none，控制隐藏

2.编译过程
v-if：有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-show：控制css

3.编译条件
v-if：若初始值为false，就不会编译了
v-show：都会编译。初始值为false，只是将display设为none，但也会编译

4.性能消耗
v-if：切换消耗大
v-show：初始渲染消耗大

5.使用场景
v-if：适合运营条件不大可能改变
v-show：适合频繁切换节点