v-for与v-if的优先级

原文地址

---

 

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

通常咱们在两种常见的状况下会倾向于这样作：

• 为了过滤一个列表中的项目 (好比 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性 (好比 activeUsers)，让其返回过滤后的列表。

• 为了不渲染本应该被隐藏的列表 (好比 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (好比 ul, ol)。

 

详解

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

所以哪怕咱们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

经过将其更换为在以下的一个计算属性上遍历：

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>

咱们将会得到以下好处：

• 过滤后的列表只会在 users 数组发生相关变化时才被从新运算，过滤更高效。
• 使用 v-for="user in activeUsers" 以后，咱们在渲染的时候只遍历活跃用户，渲染更高效。
• 解藕渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

为了得到一样的好处，咱们也能够把：

<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 移动到容器元素，咱们不会再对列表中的每一个用户检查 shouldShowUsers。取而代之的是，咱们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

反例

<ul> <li v-for="user in users" v-if="user.isActive" :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> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul>

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

---

返回目录