【vue其他相关】v-for和v-if尽量避免在同一个标签中使用

场景

例如以下场景：

<ul>
	<li v-for=“user in users” v-if=“user.isActive” :key=“user.i’d”>
		{{item.name}}
	</li>
</ul>

这里能明白是想只循环渲染出isActive为true的成员。这样做，虽然for比if 有更高的优先级，但会遍历出多余不显示的成员，每次数组一更新（无论是不显示成员的信息还是显示成员的信息）又要来一次。性能不行。

计算属性方案

computed: {
	activeUsers: {
		return this.users.filter((user)=>{
			return user.isActive
		})
	}
}

直接用activeUsers去做循环，不用if判断。一下就解决了问题。记得要学会举一反三啊。

将if条件移层

直接放在外面判断，只要判断一次，这个isActive是什么逻辑得来的要看具体情况了。

<ul v-if=“isActive”>
	<li v-for=“user in users” :key=“user.i’d”>
		{{user.name}}
	</li>
</ul>

或放内一层

<ul>
	<template v-for=“user in users” :key=“user.i’d”>
		<li v-if=“user.isActive”>
			{{user.name}}
		</li>
	</template>
</ul>

这两个方法都只是抛砖引玉的作用啦。