快速了解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 的区别

控制手段：v-show隐藏则是为该元素添加css--display:none，元素依旧还在。v-if显示隐藏是将元素整个添加或删除

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

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

• v-show 由false变为true的时候不会触发组件的生命周期

• v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

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