v-if 和 v-show 的基本使用

88 阅读1分钟

1. v-if 和 v-show 的日常使用

1.1. v-if 和 v-show 共同点

控制元素在页面是否显示

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

1.2. v-if 和 v-show 的区别

控制手段:

  • v-show通过css属性display控制css--display:none,dom元素一直存在;
  • v-if显示隐藏是通过控制dom节点将dom元素整个添加或删除;

编译过程:

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

编译条件:

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

是否触发生命周期:

  • v-show false变为true的时候不会触发组件的生命周期;
  • v-iffalse变为true的时候,触发组件的beforeCreate create beforeMount mounted钩子,由true变为false的时候触发组件的beforeDestory destoryed方法;

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

1.3. v-if 和 v-show 的使用场景

  • v-show频繁切换使用
  • v-if运行时条件少使用,有配套的v-elsev-else-if