v-if 和 v-show 的区别

v-if 和 v-show 的区别

共同点：都是动态地显示 dom 元素

区别：

• 手段不同：
  v-if 是动态地向 dom 树内添加或者删除 dom 元素
  v-show 是通过 dom 元素 display 样式属性控制显隐
• 编译过程不同：
  v-if 切换有一个局部编译/卸载的过程，在切换过程中合适的销毁和重建内部的事件监听和子组件
  v-show 只是简单的基于 css 样式切换
• 编译条件不同：
  v-if 是惰性的，如果初始条件为假，则什么都不做，只有条件在第一次为真时，才开始局部编译
  v-show 在任务条件下都被编译，然后被缓存，而且 dom 元素保留
• 性能消耗不同：
  v-if 有更高的切换消耗
  v-show 有更高的初始渲染消耗
• 适用场景不同：
  v-if 适合运营条件不大可能改变的场景
  v-show 适合频繁切换的场景