v-if与v-show的理解

v-if

v-if指令的作用：根据表达式的布尔值渲染和移除dom树

本质是通过操纵dom元素来进行切换显示

表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

v-show

v-show指令的作用是：根据真假值切换元素的显示状态 ，本质是修改css里的display来显示隐藏元素

共同点 

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

且语法格式也相同，都是

v-show="表达式或布尔值"      v-if="表达式或布尔值" 

不同点 

• 控制手段不同
• 编译过程不同
• 编译条件不同

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

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

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

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

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

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

使用场景

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

v-if相比v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好