再谈v-if

在做小兔鲜的时候，博主认为v-if好用的不得了，反看v-show真是哪哪都不行。

果然不自己写项目不知道，今天也轮到博主“真香”时刻了2333

问题出现

代码贴出来：简单描述下就是通过pinia里面存的数据实现一个简单的购物车效果

数量为0的就不显示，然鹅报错咯。

  <ul>
    <li v-for="(item,index) in cartStore.items" :key="index" v-if="item.count>0">
      {{ item.name }}-{{ item.count }}-----￥{{ item.count *item.price }}
    </li>
  </ul>

这错误比我支付宝余额还多（不是

简单粗暴的debug

你猜怎么着，博主灵机一动：把v-if换成v-show

可见已经起效了，不要吐槽项目垃圾的UI QAQ

事后分析

不认真看文档导致的，Vue文档怎么你了

v-if先执行的话，那博主辛辛苦苦写的v-for可都完犊子了（悲，也难怪报那么多错出来

歪打正着的额外发现

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。