4. v-show、v-if的区别

相同点

在vue中v-show与v-if的作用效果是相同的，都能控制元素在页面上是否显示

  <Component v-if='isShow' />
  <Component v-show='isShow' />
  // isShow为true时都会占用页面位置

区别

• 控制手段

  • v-show隐藏是为元素添加css属性display:none，dom元素还在
  • v-if显示隐藏是将dom元素添加或删除

• 编译过程

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

• 编译条件

  • v-show 由false变为true的时候不会触发组件的生命周期
  • v-if由false变为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 较好