v-for和v-if的使用

Question

v-for和v-if同时使用为什么会影响性能？

Answer 1

因为是先for再if，如果你整个列表都不展示应该将if提升；
也就是说for+if等同于：for() { if() }这样的结构；其实完全不必要去循环;当然如果你只是某些子元素不展示的话同时使用没问题，或者你也可以使用computed来过滤再循环，本质是一样的，所以是否应该同时使用看具体场景具体分析。

Answer 2

首先v-for的优先级是大于v-if的，在同时使用它们的时候会先执行v-for再执行v-if，表面上感觉这样子写不会有多大的影响，那我们把他感觉放大一下，如果我们的v-if特别的恶心，判断的特别复杂呢？每次遍历一条都判断一下的话会怎么样，就马马虎虎理解成每次都给他来个延时，这样是不是会非常难受？他的执行速率呢？

Answer 3

建议阅读下vue官方的风格指南，里面有一篇介绍到这个为什么不能连用。
附上地址风格指南

Answer 4

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

总结：v-if比v-for优先级高，一起使用在性能上会造成极大的浪费，并且官网也并不推荐我们这样做，所以我们可以选择使用computed过滤掉列表中不需要显示的项目

回答来自-知乎

Answer 5

v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能