Vue中v-if和v-show的区别及其建议应用场景

二者区别

1、渲染方式：v-if是通过控制DOM节点的存在与否来控制元素的显隐；

v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

2、编译过程：v-if的切换具有一个局部编译及卸载的过程，切换过程中，销毁、重建内部的所有事件监听和子组件；

v-show则只是简单的基于CSS切换；

3、编译条件：v-if是惰性的，倘若其初始值为false，那么其将不作为；有且只有，在条件第一次变为true时才开始局部编译，并被缓存，值再次发生改变为false时，将进行局部卸载;

v-show是在任何条件下都将被编译，然后被缓存，而且DOM元素会被保留；

4、性能消耗：v-if在切换时有较高的消耗；v-show有更高的初始渲染消耗。

 

应用场景

v-if：建议应用在不频繁切换的局部，一般在视图之间的切换，比如：弹出窗等

v-show：建议应用在较为频繁的局部，比如：文字、按钮等。