前端-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可以确保这些操作只对需要的项执行。
相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A1 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄1 天前
JavaScript 隐式全局变量解析
javascript
honkun61 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19911 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net