深度解析为什么v-if和v-for不能同时使用

v-if和v-for不能同时的原因: v-for的执行优先比v-if要高

举个例子

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //需要遍历的数据
    }
  }
};
</script>

<style scoped>
</style>


上面这组代码和下面这组是等价的

<template>
  <div class="hello">
    <div v-if="0 === 10"></div>   //第1次判断
    <div v-if="1 === 10"></div>   //第2次判断
    <div v-if="2 === 10"></div>   //第3次判断
    <div v-if="3 === 10"></div>   //第4次判断
    <div v-if="4 === 10"></div>   //第5次判断
    <div v-if="5 === 10"></div>   //第6次判断
    <div v-if="6 === 10"></div>   //第7次判断
    <div v-if="7 === 10"></div>   //第8次判断
    <div v-if="8 === 10"></div>   //第9次判断
    <div v-if="9 === 10"></div>   //第10次判断
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
};
</script>

<style scoped>
</style>


以上面这组list为例子。我们会发现。循环了10次的数据,每一次,都需要进行v-if的判断。循环10次,判断10次,如果需要循环1000次呢,那也需要判断1000次。而v-if的判断相对的比较耗费性能。大量的判断会极大的降低项目质量。

优化的几种方法

方法一

在v-if不依赖v-for的前提下,我们可以将v-if写在v-for的外层,这样就可以让v-if判断优先

还是以上面的代码片段为例子↓

<template>
  <div class="hello">
  <!-- v-if写在v-for的外层 这样就可以让v-if的优先级大于v-for,就不用去判断很多次 -->
    <div  v-if="x === 1"><div  v-for="(item) in list" :key="item" ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]
    }
  }
};
</script>

<style scoped>
</style>


方法二

当v-if的判断条件依赖于v-for的某个值时(item,index),我们则可以使用如下方法

<template>
  <div class="hello">
    <!-- 2. 然后这里去循环已经被过滤的属性 -->
     <div  v-for="(item) in ListArr" :key="item" ></div>
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]
    }
  },
  computed:{
    //1. 在computed里先做好判断,这里过滤的成本远比v-if的成本低
    ListArr(){
        return this.list.filter((_,index) => index === 1)
    }
  }
};
</script>

<style scoped>
</style>


总结

  1. v-if不能和v-for一起使用的原因是v-for的优先级比v-if高,一起使用会造成性能浪费
    解决方案有两种,把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次
  2. v-if和v-for的优先级问题在vue3中不需要考虑,vue3更新了v-if和v-for的优先级,使v-if的优先级高于v-for
  • 21
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值