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