v-for 基本用法

v-for 是 Vue 中用于循环渲染列表的指令，基本语法如下：

运行

<!-- Vue2 和 Vue3 通用基本语法 -->
<div v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}
</div>

Vue2 和 Vue3 的主要区别

1. key 属性的必要性

Vue2：key 属性在 v-for 中强烈建议使用，但不是强制要求
Vue3：当使用 <template v-for> 时，key 应该放在实际的元素上而不是 <template> 标签上

2. v-for 与 v-if 的优先级

Vue2：v-for 优先级高于 v-if，不推荐在同一元素上同时使用
Vue3：v-if 优先级高于 v-for，在同一元素上同时使用会导致错误

运行

<!-- Vue2 中不推荐的做法，Vue3 中会报错 -->
<div v-for="item in items" v-if="item.isActive" :key="item.id">{{ item.name }}
</div><!-- 推荐做法：使用计算属性过滤或在外层使用 template -->
<template v-for="item in activeItems" :key="item.id"><div>{{ item.name }}</div>
</template>

3. 数组变化检测

Vue2：使用以下数组方法会触发视图更新：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
Vue3：同样支持这些方法，但由于 Vue3 使用 Proxy 实现响应式，直接通过索引修改数组也会触发更新

// Vue2 中不会触发更新
this.items[0] = newValue// Vue2 中需要这样写
this.$set(this.items, 0, newValue)// Vue3 中直接赋值即可
this.items[0] = newValue // 会触发更新

4. 对象迭代变化

Vue2：v-for 遍历对象时顺序基于 Object.keys() 的枚举顺序
Vue3：保持 Vue2 的行为，但新增了遍历范围的概念

运行

<!-- Vue3 新增的 range 用法 -->
<div v-for="n in 10" :key="n">{{ n }}</div>

5. 片段支持

Vue2：v-for 在 <template> 上使用时，不能设置 key
Vue3：<template v-for> 可以有 key，但应该放在子元素上

运行

<!-- Vue3 中正确的做法 -->
<template v-for="item in items"><div :key="item.id">{{ item.name }}</div><div :key="item.id + '-desc'">{{ item.desc }}</div>
</template>