vue项目种为什么要在列表组件中加key,其作用是什么?

vue和react的虚拟dom的diff算法大致相同,其核心是基于两个简单的假设。diff算法的处理方法,是对操作前后的dom树同一层节点进行对比,如图:


before  

当某一层有很多相平节点时,也就是列表节点时,diff算法的更新过程默认也是遵循以上原则。

比如一下这种情况:

example

我们希望在b-c之间加一个f,diff算法默认是这样的。


diff默认算法

即把c更新成f,e更新成d在插入e。是不是很没效率。

所以我们需要使用key来给每个节点做一个唯一标识,diff算法就可以正确的识别此节点,找到正确的位置区插入节点。


key的作用
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • v-for中key的作用1.当数据发生变化时,vue是怎样更新节点的?渲染真实DOM的开销是很大的,比如有时我们修...
    AizawaSayo阅读 6,073评论 0 2
  • 文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 Re...
    李轻舟阅读 8,227评论 2 14
  • diff算法 vdom因为是纯粹的JS对象,所以操作它会很高效,但是vdom的变更最终会转换成DOM操作,为了实现...
    Upcccz阅读 5,192评论 0 3
  • 昨天上午一个人在家里做着自己的事情,忽然微信上传来李琴的消息,打开一看是一个链接:“新物种”第13届实用心...
    孙海霞_a364阅读 3,558评论 7 5
  • 她是第一个能让我展开正性情的女孩,和她在一起我把我知道的不知道,家里的,朋友的任何事我都愿意和她说,没有什么避讳,...
    悦兔i阅读 3,359评论 0 0