if中使用break_vue中v-if和v-for不建议同时使用的坑

参考官方文档:

条件渲染 — Vue.js​cn.vuejs.org
6194ac12f488ec644b8b1f7c0916bcc1.png

在官方文档中明确指出v-for和v-if不建议一起使用。

原因:v-for比v-if优先级高,所以使用的话,每次v-for都会执行v-if,造成不必要的计算,影响性能,尤其是当之需要渲染很小一部分的时候。

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

如上述情况,即使有100个user中只有一个需要使用v-if,也需要整个循环数组,这在性能上是极大的浪费。

那难道就没有更好的解决办法,回答:当然是有解决方法的;我们可以使用computed

示例:

<div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      users,: [{
        name: '111111',
        isShow: true
      }, {
        name: '22222',
        isShow: false
      }]
    }
  }
computed: {
	activeUsers: function () {
		return this.users.filter(function (user) {
			return user.isShow;//返回isShow=true的项,添加到activeUsers数组
		})
	}
}

总结:v-if比v-for优先级高,一起使用在性能上会造成极大的浪费,并且官网也并不推荐我们这样做,所以我们可以选择使用computed过滤掉列表中不需要显示的项目。

PS(这个世界本来就不公平,好好习惯吧你,頑張って!)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值