v-if和v-for的优先级

Posted 2021-05-18 李耀书

v-if和v-for的优先级

在官方文档中

v-if是根据表达式的值truthiness来有条件的渲染元素，在切换元素以及它的数据绑定/组件被销毁并重建，如果元素是<template>，将提出它的内容作为条件块。

---

首先，v-for和v-if是不应该一起使用的，必要的情况下应该替换成commpouted属性，是因为：v-for在官方文档的解释中本身就比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当只需要渲染很小一部分的时候。

同时：

在vue处理指令时。v-for比v-if具有更高的优先级

<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
  }
})

因此，哪怕我们只是渲染一小部分用户的元素，也是要经过每次冲渲染的时候遍历整个列表，而不论活跃用户是否发生了变化。

更改后：

将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表

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>

• 经过过滤后的列表，只有在数据发生了变化的时候才会被运算，更加高效
• 在渲染的时候，只渲染活跃的用户
• 具有很高的可维护性。

同样，我们也可以通过不其他的方法来实现

错误写法：

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

修改后：

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

注意：

永远不要把 v-if 和 v-for 同时用在同一个元素上。