[Vue]写 Vue 项目时为什么要在列表组件中写 key，其作用是什么？

╰+攻爆jí腚メ 2022-11-30 01:23 138阅读 0赞

key能提高diff效率其实是不准确的。

见vue/patch.js，在不带key的情况下，判断sameVnode时因为a.key和b.key都是undefined，对于列表渲染来说已经可以判断为相同节点然后调用patchVnode了，实际根本不会进入到答主给的else代码，也就无从谈起“带key比不带key时diff算法更高效”了。

然后，官网推荐推荐的使用key，应该理解为“使用唯一id作为key”。因为index作为key，和不带key的效果是一样的。index作为key时，每个列表项的index在变更前后也是一样的，都是直接判断为sameVnode然后复用。

说到底，key的作用就是更新组件时**判断两个节点是否相同**。相同就复用，不相同就删除旧的创建新的。

正是因为带唯一key时每次更新都不能找到可复用的节点，不但要销毁和创建vnode，在DOM里添加移除节点对性能的影响更大。所以会才说“不带key可能性能更好”。看下面这个实验，渲染10w列表项，带唯一key与不带key的时间对比：

不使用key的情况：

使用id作为key的情况：

list构造：

const list1 = []
      const list2 = []
      for (let i = 0; i <= 100000; i++) { 
        list1.push({ 
          id: i,
          text: i
        })
        list2.push({ 
          id: i * 2,
          name: 100000 - i
        })
      }

因为不带key时节点能够复用，省去了销毁/创建组件的开销，同时只需要修改DOM文本内容而不是移除/添加节点，这就是文档中所说的“刻意依赖默认行为以获取性能上的提升”。

既然如此，为什么还要建议带key呢？因为这种模式只适用于渲染简单的无状态组件。对于大多数场景来说，列表组件都有自己的状态。

举个例子：一个新闻列表，可点击列表项来将其标记为"已访问"，可通过tab切换“娱乐新闻”或是“社会新闻”。

不带key属性的情况下，在“娱乐新闻”下选中第二项然后切换到“社会新闻”，"社会新闻"里的第二项也会是被选中的状态，因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上新闻id作为唯一key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。

这只是个简单的例子，实际应用会更复杂。带上唯一key虽然会增加开销，但是对于用户来说基本感受不到差距，而且能保证组件状态正确，这应该就是为什么推荐使用唯一id作为key的原因。至于具体怎么使用，就要根据实际情况来选择了。

此文转载自：  
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1

[Vue]写 Vue 项目时为什么要在列表组件中写 key，其作用是什么？

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue中的var that=this；是啥意思？为什么要这样写？

相关为什么要写博客，写博客的意义是什么

相关面试官：说说为什么要在列表组件中写 key，其作用是什么？

相关面试官：说说为什么要在列表组件中写 key，其作用是什么？

相关 [Vue]写 Vue 项目时为什么要在列表组件中写 key，其作用是什么？

相关 Vue和react 列表项中key作用

相关为什么 Vue 中不要用 index 作为 key？

相关 Vue篇(008)-写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

相关什么是vue？为什么用vue？

相关面试题（第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？）