V-if与V-show（浅谈，vue学习笔记）

 

 

1、v-show与v-if的共同点 

在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都控制元素在页面是否显示。

在用法上也是相同的

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

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

 1、v-show与v-if的不同点

1、控制手段

v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。

v-if显示隐藏是将dom元素整个添加或删除。

2、编译过程

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

3、编译条件

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

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

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

 

原理 ：

v-show：原理：修改元素的display，实现显示隐藏

v-if：通过操纵DOM元素来切换显示状态

 3.应用场景

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

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

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

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