【Vue】v-if 和 v-show 的区别及应用场景

相同点：v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。

不同点：

1. 手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏，DOM 元素保留；

2. 编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；

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

4. 性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

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

END