根据Vue官方风格指南,我们可以知道:永远不要把 v-if 和 v-for 同时用在同一个元素上。当处于同一节点时,v-for 的优先级比 v-if 更高,v-if将会被重复执行,每次都遍历整个列表,过于消耗性能。

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

解决办法有2种:

1.在渲染数据之前(computed),使用计算属性
2.v-if提出到v-for的外层,v-if先执行