v-if和v-show指令的共同点和不同点

一、v-show与v-if的共同点

vue中v-show和v-if在不含v-else的情况下都可以控制元素在页面中是否显示

在用法上也差不多

<Model v-show="isShow" />
<Model v-if="isShow" />

当结果为true时会占据页面位置，为false时则会占用位置

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

1.控制手段不一样

v-show隐藏是为元素添加display：none，dom元素还是存在的

v-if则是直接将整个元素直接删除或者添加

2.编译手段不一样

2.1编译过程

v-if切换有一个局部编译和卸载的过程，切换过程中合适的销毁和重建内部的监听事件和子组件

v-show则是控制css的切换

2.2编译条件

v-show都会编译，就算初始值为false，也是只是将display设置为none，但是它也编译了

v-if初始值为false就不会继续编译了

2.3性能消耗

v-if有更高的切换消耗；

v-show有更高的初始值渲染消耗

三、v-show和v-if的使用场景

v-if与v-show都能控制dom元素在页面上显示

v-if相比v-show开销更大（因为是不断的添加和删除）

如果需要频繁的切换，使用v-show更好

如果运行条件很少改变，还是v-if比较好