vue中v-if和v-for同时使用的问题

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

如上述情况，即使有100个user中只有一个需要使用v-if，也需要整个循环数组，这在性能上是极大的浪费。

那难道就没有更好的解决办法，回答：当然是有解决方法的；我们可以使用computed

示例：

<div>
    <div v-for="(user,index) in activeUsers" :key="user.index" >
        {{ user.name }} 
    </div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      users,: [{
        name: '111111',
        isShow: true
      }, {
        name: '22222',
        isShow: false
      }]
    }
  }
computed: {
    activeUsers: function () {
        return this.users.filter(function (user) {
            return user.isShow;//返回isShow=true的项，添加到activeUsers数组
        })
    }
}

当然还有另一种方法：

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

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

<ul v-if="todos.length">
 <li v-for="todo in todos">
{{ todo }}
 </li>
</ul>
<p v-else>No todos left!</p>