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

我们都知道在vue中的v-show与v-if的作用效果是相同的（不含v-else），都能控制元素在页面上是否显示，在用法上也是相同的。如下代码所示：

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

当表达式为true 的时候，都会占据页面的位置，反之，不会占据页面的位置。

我们创建如下的页面的代码，让两个isShow1和isShow2来控制v-if和v-show修饰的div盒子。默认状态下是false，两个盒子的颜色不显示。

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

v-show的隐藏则是因为该元素添加了"display:none",dom元素依然存在。而v-if是显示隐藏是将dom元素整个添加或者删除，比较耗费性能。

v-if有一个局部的编译或者卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的css的切换。

v-if是真正的条件渲染，他会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建。只有当渲染条件为假的时候，不做操作，直到为真才渲染。

v-show由false变为true 的时候会触发生命周期函数beforeUpdate和updated函数。

v-if由false变为true的时候，触发组件的beforeCreate、created、beforeMount、mounted这些生命周期钩子函数，由true变为false的时候触发组件的beforeDestory、destoryed函数。

总结：v-if有着更高的性能消耗，；v-show有更高的初始渲染消耗；

v-if和v-show都能控制dom元素在页面的显示；

v-if与v-show相比，更加耗费性能；

如果需要频繁的切换，使用v-show就好，如果在运行时很少改变条件，使用v-if就行；