为什么v-if和v-for不建议同时使用

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

原因：vue2中v-for比v-if优先级高 ，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。

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

解决：使用computed

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

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

vue3中v-if比v-for优先级高, 因此v-if执行时要调用的变量可能还不存在，会导致报错，可以将v-for用template标签包裹

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