Vue中v-for里面key的作用

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

随着Vue的不断发展，深入了解技术背后的原理也越来越重要，很多人都开启了Vue源码学习，本文就介绍了v-for中key的基础内容。

---

一、Key是什么？

Key 特殊属性主要用做 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下，Vue 使用一种算法来最小化元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。使用键，它将根据键的顺序更改对元素进行重新排序，并且不再存在键的元素将始终被删除/销毁。

二、有无Key值不同调用方法

Vue内部会对有无Key值的for循环进行不同方法的处理

Tips：新的nodes 无非是 旧nodes 再进行 新增，删除，修改的操作后形成的

1. patchKeyedChildren

有 Key， 进行 patchKeyedChildren

代码如下（示例）：

---

2. patchUnKeyedChildren

没有 Key ，进行 patchUnKeyedChildren

代码如下（示例）：

patchUnkeyedChildren方法内部处理方式

1. 源码中分别使用变量名称 c1,c2，用来表示 旧的nodesChildren和 新的nodesChildren，然后分别 获取 新旧 nodesChildren节点的长度，对两者长度进行取小，之后进行循环patch处理

代码如下（示例）：

2. 新旧 nodesChildren 节点 数量不一致的处理方方式

在上一步循环遍历完成后，如果 oldNodes 的长度 不等于 newNodes，则整个过程并未完成

• 如果 oldNodes 的长度 正好等于 newNodes， 则说明 原地 patch 完成
• 如果 oldNodes 的长度 大于 newNodes，则会进行UnMountChildren
• 如果 oldNodes 的长度 小于 newNodes，则会进行MountChildren

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Key的处理过程。