Vue中v-for里面key的作用

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


文章目录

  • 前言
  • 一、Key是什么?
  • 二、有无Key值不同调用方法
    • 1. patchKeyedChildren
    • 2. patchUnKeyedChildren
  • 总结


前言

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


一、Key是什么?

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

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

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

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

1. patchKeyedChildren

有 Key, 进行 patchKeyedChildren

代码如下(示例):

Vue中v-for里面key的作用_第1张图片


2. patchUnKeyedChildren

没有 Key ,进行 patchUnKeyedChildren

代码如下(示例):

Vue中v-for里面key的作用_第2张图片

patchUnkeyedChildren方法内部处理方式

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

代码如下(示例):
Vue中v-for里面key的作用_第3张图片

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

Vue中v-for里面key的作用_第4张图片
在上一步循环遍历完成后,如果 oldNodes 的长度 不等于 newNodes,则整个过程并未完成

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

总结

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

你可能感兴趣的:(Vue.js,vue.js,前端,javascript)