背景
在Vue中有着许多的指令（directive），有些指令有着相同的功能，但彼此之间也有着不同点，今天便浅谈一下v-if和v-show的一些异同点
一、共同点
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示
在用法上也是相同的
<Model v-show="isShow" />
<Model v-if="isShow" />
- 当表达式为
true的时候，都会占据页面的位置； - 当表达式都为
false时，都不会占据页面位置；
二、不同点
v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
三、使用场景
v-if 与 v-show 都能控制dom元素在页面的显示
v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）
如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好