前端-Vue组件key的作用

写在前面:这是一个排行版组件,但是点击下钻的时候更新dataList 数据,但是动画是从一部分开始加载的,类似于列表的一部分数据被复用了,虽然里面的值换了,但是动画不在了

这里描述一下组件key的作用,通过这个key 解决了组件动画只有一半的BUG。

  1. key 为列表中的每个元素提供了一个唯一标识,Vue使用这个标识来跟踪每个节点的身份,从而在数据变化是高效的更新Dom。
  2. 当列表数据发生变化时,Vue通过比较key来决定如何更新列表,如果key没有变化,Vue 会尝试重用现有的元素,而不是重新创建它们,从而提高更新效率。
  3. 使用key可以却比奥尔即使Dom 元素被重新排序或者替换,组件的状态也能被保留。
  4. 在列表项是组件的情况下,使用key可以避免组件的生命周期钩子(如 created、mounted、beforeDestroy 等)在不正确的时机被激活。
  5. 当列表项动态变化时,key 帮助Vue 识别那个项被改变,添加或者删除,从而减少不必要的Dom 操作。
  6. 对于包含输入控件的列表项,使用key 可以确保即使其在列表中的位置发生变化,输入控件也能保持正确的状态。
  7. 在使用虚拟滚动的长列表中,key 帮助Vue 识别哪些项应该被渲染在屏幕上,从而提高渲染效率。
  8. 在列表中,如果包含执行副作用的操作(如异步请求),使用key可以确保这些操作只对需要的项执行。
相关推荐
武昌库里写JAVA35 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer6 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu6 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc