vue v-show和v-if的区别

1.手段

v-if 是动态的向DOM树内添加或删除DOM元素
v-show 是利用css样式的display属性来显示隐藏

2.编译过程

v-if 切换是一个局部编译和局部卸载的过程，销毁和重建内部的时间监听和子组件
v-show 只是css样式的切换

3.编译条件

v-if 是惰性的，第一次渲染条件为否就啥也不做，只有条件第一次改变为真的情况下才开始局部编译，然后在切换的时候卸载
v-show 不管初始条件下的状态是否为真，都会编译，然后被缓存，保留dom元素

4.消耗

v-if 有更高的切换消耗
v-show 有更高的初始渲染消耗

5.使用场景

v-if 适合条件不太可能改变的情况
v-show 适合频繁的切换