Vue 中 v-for 的使用及 Vue2 与 Vue3 的区别
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>
最佳实践
始终为
v-for
提供唯一的key
属性避免在同一元素上同时使用
v-for
和v-if
在 Vue3 中,对于复杂的列表操作,考虑使用
ref
和reactive
使用计算属性处理需要过滤或排序的列表
Vue3 的这些变化主要是为了提供更一致的开发体验和更好的性能,大多数 v-for
的基本用法在 Vue2 和 Vue3 中是相同的。