vue中v-if 和 v-show的区别

1. 相同点

v-if 和 v-show 都可以动态地控制元素的显示与隐藏。

2. 不同点

2.1 实现本质方法不同

v-if 是动态的向DOM树内添加或者删除DOM元素；
v-show 是通过设置DOM元素的display样式属性控制显隐；

2.2 编译的区别

v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的控制css样式切换；

2.3 编译的条件不同

v-if 是惰性的，如果初始条件为false，则什么也不做；只有在条件第一次变为true时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

2.4 性能不同

v-if 因为懒加载，初始为 false 时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，在不停的销毁和创建, 因此切换开销比较大,但是初始渲染开销较小;

v-show 初始无论为 true 或者 false, 初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大。

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低

2.5 适用场景

v-if 适用于不需要频繁的切换某节点,运营条件不大可能改变的情况

v-show 更适用于频繁切换某节点