作者简介:大家好,我是Taro,前端领域创作者
✒️ 个人主页:唐璜Taro
支持我:点赞+ 评论 + ⭐️收藏
随着Vue的不断发展,深入了解技术背后的原理也越来越重要,很多人都开启了Vue源码学习,本文就介绍了v-for中key的基础内容。
Key
特殊属性主要用做 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下,Vue 使用一种算法来最小化元素移动,并尝试尽可能多地就地修补/重用相同类型的元素。使用键,它将根据键的顺序更改对元素进行重新排序,并且不再存在键的元素将始终被删除/销毁。
Vue内部会对有无Key值的for循环进行不同方法的处理
Tips
:新的nodes 无非是 旧nodes 再进行 新增,删除,修改的操作后形成的
有 Key, 进行 patchKeyedChildren
代码如下(示例):
没有 Key ,进行 patchUnKeyedChildren
代码如下(示例):
patchUnkeyedChildren方法内部处理方式
在上一步循环遍历完成后,如果 oldNodes 的长度 不等于 newNodes,则整个过程并未完成
以上就是今天要讲的内容,本文仅仅简单介绍了Key的处理过程。