当前位置:首页 » 《随便一记》 » 正文

Vue中key

18 人参与  2023年05月04日 11:13  分类 : 《随便一记》  评论

点击全文阅读


相信很多小伙伴跟我一样在使用v-for的时候对key值的存在和必要性有疑问,通过ESlint进行代码检查的时候不加上key还会报错,想知道key为什么存在可以先想想key为什么产生,会不会是尤雨溪灵光一闪就给Vue添加上了key?也有可能,不过存在即为合理,咱们来看看key的合理性。

官方的相关解释

key使用在Vue的虚拟DOM算法,在新旧vNodes(虚拟节点)对比的时候对节点进行辨别。

如果不使用key,Vue会使用最大限度减少动态元素并且尽可能修改复用相同类型元素;

如果使用key,Vue会基于key的变化重新排列元素顺序,并且移除/销毁key不存在的元素;

乍一看上面的内容,确实不易理解,咱们通过底层代码的实现逻辑来学习一下key。下文A代表旧的虚拟节点数组,A1代表新的虚拟节点数组,a代表旧的虚拟节点,a1代表新的虚拟节点

无key时的逻辑

分为三个步骤

1.比较A和A1之间的长度,找出较短的数组;

2.如果对比的时候,新旧虚拟节点的类型和内容完全一致,那就不需要改变a1对应的内容,直接进行patch即可;

3.如果A1的长度比A的数组长度短,那么就卸载抛弃多余的节点,

如果A1的长度比A的数组长度长,那么就增加新的节点。

有key时的逻辑

分为五个步骤

1.通过while循环从首部开始比较,拿到a和a1,比较两者的type和key是否相同,如果相同,就直接patch复用,如果a和a1不同,进行下一步;

2.通过while循环从尾部进行比较,拿到a和a2,比较两者的type和key是否相同,如果相同,还是直接复用,如果不同,进行下一步;

3.如果A1的长度比A的长度大,通过mount挂载新的节点;

4.如果A1的长度比A的长度小,通过unmount卸载移除节点;

5.中间无序部分,通过key指引的方式来进行,如果有相同的key,就直接通过key进行patch操作,如果key与在原来A的位置不同,通过移动的方式进行操作,如果A+有多或者少,通过挂载后者移除操作。

这个步骤的顺序也不难理解,我们做事情也是从前往后,小时候如果在班里比较调皮座位就会被调到前面,从后往前,有名单册的点名和没有名单册的点名,效率不同。

心得体会

一个效果从设想到代码实现需要很多思考,想想key的实现步骤就有好多,由物到人,愿意等你把说出来的变成做出来的人也难能可贵,且行且珍惜。


点击全文阅读


本文链接:http://zhangshiyu.com/post/60618.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 全文缘来是你早注定良心(萧千雅胡一阳)列表_全文缘来是你早注定良心
  • 「爱让我溺毙而亡」小说节选推荐_[羽柔乔羽柔林絮]章节限时抢先看‌
  • 此去经年人未还霍沉洲沈青禾后续结局霍沉洲
  • 山海不相逢内容精选(温逸尘沈衿)_山海不相逢内容精选(温逸尘沈衿)
  • (番外)+(全书)霍沉洲沈青禾此去经年人未还(霍沉洲沈青禾)_(霍沉洲沈青禾此去经年人未还)列表_笔趣阁(霍沉洲沈青禾)
  • (番外)+(全书)霍沉洲沈青禾(此去经年人未还霍沉洲沈青禾)完结_(霍沉洲沈青禾)列表_笔趣阁(此去经年人未还霍沉洲沈青禾)
  • 「重回八零,拒绝替嫁冲喜」章节彩蛋限时释出‌_卫东玉兰苏夏人气小说未删减节选
  • 重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费重生七零祁同伟不再是农民儿子结局+番外纯净版全书免费
  • 傅雅宁的神女老婆,却在背地承欢作乐顾尘傅雅宁全书在线
  • 全文神女老婆,却在背地承欢作乐全局(顾尘傅雅宁)列表_全文神女老婆,却在背地承欢作乐全局
  • (番外)+(全书)此去经年人未还全书+番外+后续免费下载_(沈青禾霍沉洲)此去经年人未还全书+番外+后续列表_笔趣阁(沈青禾霍沉洲)
  • 完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续列表_完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续(林梦婉)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1