v-if与v-show的区别

1. 相同点

都可以动态控制着dom元素的显示和隐藏。

---

2. 区别

v-if ：是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的 事件监听器 和 子组件 适当地 被销毁 和 重建 。
v-show : 控制DOM的显示和隐藏是 为DOM元素添加css的样式 display , 设置 node 或者是 block``， v-show 的元素 始终会 被渲染并保留 在 DOM 中 。

---

2.1 编译条件

v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

---

2.2 性能对比

v-if 有更高的切换消耗。
v-show 有更高的初始渲染消耗。

---

2.3 使用场景

v-if 适合运营条件不大可能改变的场景下；
v-show 适合频繁切换；

v-if:

在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据刚开始没有值，此时我们页面也会进行渲染空数据就会报错。
我们可以把一个元素作为包装元素，并使用v-if 进行条件判断，如果有值，才会显示内部元素。最终的渲染不会包含这个元素，v-show是不支持这么做的。

<div class="supports-count">
      <span class="count">{{seller.supports.length}}个</span>
      <i class="icon-keyboard_arrow_right"></i>
</div>

export default {
data() {
return {
   seller:null
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
  this.$axios.get('http://www.test.com').then(res=>{
      this.seller=res.data
  })
},
}

组件刚创建，渲染完成后，请求未必能完成。所以一开始的seller.supports只是一个空值，必须在之前加上v-if，确保有值以后再开始计算length

  <div class="supports-count" v-if="seller.supports">
      <span class="count">{{seller.supports.length}}个</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>

v-show:

商品分类选项卡，频繁切换；