vue中v-if和v-for優先級

v-for和v-if不應該一起使用，必要情況下應該替換成computed屬性。原因：v-for比v-if優先，如果每一次都需要遍歷整個數組，將會影響速度，尤其是當之需要渲染很小一部分的時候。

 

錯誤寫法

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

如上情況，即使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>

喜歡的小伙伴可以關注我的微信公眾號“前端偽大叔”