vue中v-for和v-if的优先级?是否一起使用?利弊?如何规避

官方文档中明确指出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>

解决方法:
我们可以使用computed,首先筛选出满足条件的数据,然后在渲染在界面上

<div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
····
computed: {
	activeUsers: function () {
		return this.users.filter(function (user) {
			return user.isShow;//返回isShow=true的项,添加到activeUsers数组
		})
	}
}

总结:v-if比v-for优先级高,一起使用在性能上会造成极大的浪费,所以我们可以选择使用computed过滤掉列表中不需要显示的项目。
摘自:知乎 https://zhuanlan.zhihu.com/p/147882950?from_voters_page=true

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×