永遠不要把v-if和v-for同時用在同一個元素上

問題分析

結構如下:

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

以上結構會經過如下計算:

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

缺點如下:

  • 哪怕我們只渲染出一小部分用戶的元素,也得在每次重渲染的時候遍歷整個列表,不論活躍用戶是否發生了變化。

解決辦法

使用計算屬性結構如下:

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

計算屬性處理:

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

以上結構會經過如下計算:

this.activeUsers.map(user => user.name)

優點如下:

  • 過濾後的列表只會在 users 數組發生相關變化時才被重新運算,過濾更高效。
  • 使用 v-for=“user in activeUsers” 之後,我們在渲染的時候只遍歷活躍用戶,渲染更高效。
  • 解耦渲染層的邏輯,可維護性 (對邏輯的更改和擴展) 更強。

參考

官方風格指南

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章