Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

前言

本笔记主要基于官方文档《迁移策略——v-if 与 v-for 的优先级对比》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

知识储备：

在阅读本文前，您最好熟知一下知识：

v-if 和 v-for 是 Vue 中最常用的两个指令。开发过程中，难免有希望再同一个元素上同时使用两者的情况。然而，这种做法是 Vue 不推荐的用法。如，Vue 官方的《风格指南》就这样说到：

永远不要把 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 不推荐这样使用，但是这种用法有时候 Vue 还是正常显示出来了。

概述

在 Vue 3.x，如果在一个元素上同时使用 v-for 和 v-if，v-if 的优先级高于 v-for。

Vue 2.x 对 v-if 和 v-for 的处理

在 Vue 2.x 中， 如果在一个元素上同时使用 v-for 和 v-if，Vue 会优先渲染 v-for。

因此，下面这个做法仍然是可以正常渲染的。

<template>
  <ul>
    <li v-for="i in 10" :key="i" v-if="i > 5" >{{ i }}</li>
  </ul>
</template>

因为v-for 先被渲染出来，所以v-if 表达式里面的变量i可以正常获取。但是这样就造成资源的浪费，先通过 v-for 渲染出来，然后又立即将部分DOM给移除了。

为什么不先确定要真正需要渲染的列表再渲染呢？

Vue 3.x 调整 v-if 和 v-for 优先级

为了避免上面例子的出现，Vue 3.x 对 v-if 和 v-for 的优先级做了对调。即， 如果在一个元素上同时使用v-for 和 v-if，v-if 的优先级高于 v-for。这样调整之后，上面的例子就不能正常使用了。因为 v-if 优先处理，那表达式里的变量 i 就无法获取到，导致报错。通过这样的调整，从而规范了两者的使用。

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听