Vue中的v-show和v-if的区别

1.共同点：

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

两着为true都会占据页面的位置；

两者为false都不会占据页面位置。

2.控制手段不同

v-show 是控制css里的display:none进行Dom的显示和隐藏。

v-if是将Dom元素删除或添加，切换过程中会合适地销毁和重建内部事件监听和子组件。

v-show由false变为true时不会触发生命周期钩子。

v-if由false变为true时触发时会触发组件的beforeCreate(组件实例被创建之初)、create(组件实例已经被创建)、beforeMount（组件挂载之前）、mounted（组件挂载到实例上去之后）生命周期钩子。

使用场景：

两者都能很好的控制Dom元素在页面的显示，v-if比v-show使用开销更大，他是直接操纵dom的删除和添加。需要非常频繁的切换用v-show；运行时改变条件较少用v-if。