v-if和v-for为什么不要使用在同一个元素上

vue官方强烈建议不要将v-for和v-if用在同一个元素上

因为v-for比v-if有更高的优先级，所以即使只是需要通过v-if来渲染一部分内容，也需要在每次重新渲染的时候遍历整个列表，而不考虑需要的内容是否发生了变化，所以不在同一个元素上同时使用v-for和v-if是一种提升性能的手段

当然：需要进行这类操作一般分为两种情形：

一、过滤一个列表中的项目

例：

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

可以这样改写：

定义一个计算属性去过滤列表，然后使用v-for去遍历计算属性

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

更改模板：

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

改写之后有以下好处：

• 计算属性中的内容只在原列表发生变化时才重新计算，不需要每次都去遍历原列表
• 渲染时只渲染需要的内容
• 解耦渲染层的逻辑，提高代码的可维护性

二、只渲染需要展示的列表

<ul>
    <li
        v-for="user of users"
        v-if="showUsers"
        :key="user.id"
    >
    </li>
</ul>

将v-if判断添加在其包裹容器上，就不需要每次都检查每一项的showUsers属性，而是只检查它一次，且不会在showUsers为false的时候进行v-for运算

<ul v-if="showUsers">
    <li
    	v-for="user of users"  
        :key="user.id"
  	>
    </li>
</ul>