風(fēng)格指南：https://cn.vuejs.org/v2/style-guide/

v-for和v-if不應(yīng)該一起使用，必要情況下應(yīng)該替換成computed屬性。

• 原因：v-for比v-if優(yōu)先，如果每一次都需要遍歷整個(gè)數(shù)組，將會(huì)影響速度，尤其是當(dāng)之需要渲染很小一部分的時(shí)候。

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

如上情況，即使100個(gè)user中之需要使用一個(gè)數(shù)據(jù)，也會(huì)循環(huán)整個(gè)數(shù)組。

• 正確：

  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>