vue v-if与v-show的深入思考

1、v-if与v-show的区别

v-if是一个惰性元素，只有满足条件，才会渲染，所以在项目中用v-if，在页面初始化的性能上占有优势，但如果页面加载完成后，需要频繁控制页面的显示隐藏时，v-if就会不断卸载、渲染组件造成较大的切换开销。

v-show就是不管满不满足条件，都会进行渲染（与v-if相反，初始渲染成本大），渲染成功后通过display属性控制显隐，由于组件是通过css控制显隐，而不是卸载、重新渲染，所以v-show的切换成本小，但渲染成本大。

2、v-if与v-show的优化思考

vue结合v-if与v-show的特点，创造了一个组件keep-alive，具体使用方法如下，v-if控制显隐，降低页面初始开销，keep-alive缓存组件，降低组件切换开销，结合v-if和v-show的优点

<keep-alive>
    <customA v-if="a==1"/>   //自定义的组件
    <customB v-if="a==2"/>
</keep-alive>