v-if 和 v-show

共同点

  • 效果相同
  • 使用方式类似 （else-if）

区别

  • 控制手段不同：
    • v-show 是通过控制 css 的 display 属性进行控制， dom 元素一直存在
    • v-if 则是通过 dom 节点的添加与删除进行节点渲染
  • 编译过程不同：
    • v-show 只需进行简单的 css 切换
    • v-if 则需要进行局部编译/卸载， 切换过程中会触发组件生命周期
      • 当有 false 变true 时，触发组件的 beforeCreate、 create、 beforeMount、 mounted 生命钩子
      • 反之， 则触发 beforeDestory、destoryed
  • 性能消耗：
    • v-show 初次渲染消耗大
    • v-if 切换消耗大

应用场景

  • 频繁切换： 推荐使用 v-show
  • 运行时条件很少改变： 则使用 v-if