当前位置: 首页 > news >正文

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 属性的必要性

  • Vue2key 属性在 v-for 中强烈建议使用,但不是强制要求

  • Vue3:当使用 <template v-for> 时,key 应该放在实际的元素上而不是 <template> 标签上

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

  • Vue2v-for 优先级高于 v-if,不推荐在同一元素上同时使用

  • Vue3v-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. 对象迭代变化

  • Vue2v-for 遍历对象时顺序基于 Object.keys() 的枚举顺序

  • Vue3:保持 Vue2 的行为,但新增了遍历范围的概念

运行

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

5. 片段支持

  • Vue2v-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>

最佳实践

  1. 始终为 v-for 提供唯一的 key 属性

  2. 避免在同一元素上同时使用 v-for 和 v-if

  3. 在 Vue3 中,对于复杂的列表操作,考虑使用 ref 和 reactive

  4. 使用计算属性处理需要过滤或排序的列表

Vue3 的这些变化主要是为了提供更一致的开发体验和更好的性能,大多数 v-for 的基本用法在 Vue2 和 Vue3 中是相同的。

http://www.dtcms.com/a/337865.html

相关文章:

  • Vue 3中watch的返回值:解锁监听的隐藏技巧
  • Navicat 无法登录时找回 SQL 文件的方法
  • Tidio实时聊工具
  • Linux上安装PostgreSQL-源码编译安装备份恢复(超详细)
  • 视觉语言导航(4)——强化学习的三种方法 与 优化算法 2.43.4
  • IP白名单、网段白名单
  • Docker小游戏 | 使用Docker部署文字风格冒险网页小游戏
  • 如何选择一个好的软件成分分析工具?
  • 【计算机视觉与深度学习实战】05计算机视觉与深度学习在蚊子检测中的应用综述与假设
  • 【java中springboot引入geotool】
  • apisix负载均衡测试
  • 负载均衡终极指南:从流量分发到云原生架构的核心解析
  • Spring学习笔记:@Async Spring异步任务的深入学习与使用
  • 基于CentOS 7.6搭建GitLab服务器【玩转华为云】
  • TVS二极管选型指南
  • 构建高效智能语音代理:技术架构、实现细节与API服务推荐
  • 5G + AI + 云:电信技术重塑游戏生态与未来体验
  • Java基础的128陷阱
  • BAS16XV2T1G ON安森美半导体 高速开关二极管 电子元器件IC
  • 【本地部署问答软件Apache Answer】Answer开源平台搭建:cpolar内网穿透服务助力全球用户社区构建
  • JVM 垃圾回收基础原理:深入探索内存自动管理机制
  • 决策树学习报告
  • 决策树的基本学习
  • 接口文档——前后端分离开发模式下的“契约书“
  • 科伦博泰:商业化引爆点已至,冲向Biopharma的“最后一公里”
  • B4265 [朝阳区小学组 2019] rectangle
  • JavaWeb前端02(JavaScript)
  • Python常用的GUI模块
  • 软考 系统架构设计师系列知识点之杂项集萃(129)
  • illustrator插件大全 免费插件介绍 Ai设计插件集合 (4)