img

Vue使用注意事项:v-for和v-if不要一起使用

2020-07-22 0条评论 1.9k次阅读 JavaScript

v-for和v-if不应该一起使用,必要情况下应该替换成computed属性。


原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

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

如上情况,即使100个user中之需要使用一个数据,也会循环整个数组。

正确:

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>

转载于:https://www.jianshu.com/p/0f6fb67b3e3e

💬 COMMENT


🦄 支持markdown语法

👋友