v3+ts慢慢学习之路四【vfor和它当中的key】

“会倾听” 比 “会表达”更为难得

一、v-for支持的类型

1、遍历数组

• v-for遍历数组一&＃xff1a; “item in 数组”
• v-for遍历数组二 &＃xff1a;“(item,index) in 数组”

2、遍历对象

• v-for遍历对象一&＃xff1a; “value in 对象”
• v-for遍历对象二&＃xff1a;“(value,key) in 对象”
• v-for遍历对象三&＃xff1a;“(value,key,index) in 对象”

3、遍历数字

• v-for遍历对数字&＃xff1a; “item in 数字”
• 每一个item都是一个数字
  

二、 v-for中的key是什么作用

先看一段官方对v-for的介绍

简单翻译总结&＃xff1a;
1、 key主要用于Vue的虚拟DOM算法&＃xff0c;在新旧nodes对比时辨别VNodes&＃xff1b;
2、不使用key&＃xff0c;Vue会使用一种算法尽可能的尝试就地修改/复用相同类型元素&＃xff1b;
3、使用key时&＃xff0c;它会基于key的变化重新排列元素顺序&＃xff0c;并且会移除/销毁key不存在的元素&＃xff1b;

遇事不决&＃xff0c;就先看看源码&＃xff0c;Vue到是怎么区分

源码中是如何区分有key和没有key的

未使用KEY的情况下

// 未使用key的情况下
const patchUnkeyedChildren &＃61; (c1: VNode[],c2: VNodeArrayChildren,container: RendererElement,anchor: RendererNode | null,parentComponent: ComponentInternalInstance | null,parentSuspense: SuspenseBoundary | null,isSVG: boolean,optimized: boolean) &＃61;> {c1 &＃61; c1 || EMPTY_ARRc2 &＃61; c2 || EMPTY_ARR// 1、旧节点长度const oldLength &＃61; c1.length// 2、新节点长度const newLength &＃61; c2.length// 3、获取新旧节点最小的长度const commonLength &＃61; Math.min(oldLength, newLength)let i// 4、从0的位置开始依次patch比较for (i &＃61; 0; i < commonLength; i&＃43;&＃43;) {const nextChild &＃61; (c2[i] &＃61; optimized? cloneIfMounted(c2[i] as VNode): normalizeVNode(c2[i]))patch(c1[i],nextChild,container,null,parentComponent,parentSuspense,isSVG,optimized)}// 5、如果旧节点长度依旧大于新节点长度&＃xff0c;那么就移除旧节点if (oldLength > newLength) {// remove oldunmountChildren(c1, parentComponent, parentSuspense, true, commonLength)} else {// 6、否则就创建新节点// mount newmountChildren(c2,container,anchor,parentComponent,parentSuspense,isSVG,optimized,commonLength)}}


未使用KEY的过程如下图

使用KEY的情况下

// 在使用KEY的情况下
// can be all-keyed or mixedconst patchKeyedChildren &＃61; (c1: VNode[],c2: VNodeArrayChildren,container: RendererElement,parentAnchor: RendererNode | null,parentComponent: ComponentInternalInstance | null,parentSuspense: SuspenseBoundary | null,isSVG: boolean,optimized: boolean) &＃61;> {let i &＃61; 0const l2 &＃61; c2.lengthlet e1 &＃61; c1.length - 1 // prev ending indexlet e2 &＃61; l2 - 1 // next ending index// 1、从头部开始遍历&＃xff0c;遇到相同节点就继续&＃xff0c;遇到不同的就跳出循环// 1. sync from start// (a b) c// (a b) d ewhile (i <&＃61; e1 && i <&＃61; e2) {const n1 &＃61; c1[i]const n2 &＃61; (c2[i] &＃61; optimized? cloneIfMounted(c2[i] as VNode): normalizeVNode(c2[i]))if (isSameVNodeType(n1, n2)) {patch(n1,n2,container,null,parentComponent,parentSuspense,isSVG,optimized)} else {break}i&＃43;&＃43;}// 2、从尾部开始遍历&＃xff0c;遇到相同节点就继续&＃xff0c;遇到不同就跳出循环// 2. sync from end// a (b c)// d e (b c)while (i <&＃61; e1 && i <&＃61; e2) {const n1 &＃61; c1[e1]const n2 &＃61; (c2[e2] &＃61; optimized? cloneIfMounted(c2[e2] as VNode): normalizeVNode(c2[e2]))if (isSameVNodeType(n1, n2)) {patch(n1,n2,container,null,parentComponent,parentSuspense,isSVG,optimized)} else {break}e1--e2--}// 3、如果旧节点遍历完了&＃xff0c;依然有新的节点&＃xff0c;那么新的节点就是添加// 3. common sequence &＃43; mount// (a b)// (a b) c// i &＃61; 2, e1 &＃61; 1, e2 &＃61; 2// (a b)// c (a b)// i &＃61; 0, e1 &＃61; -1, e2 &＃61; 0if (i > e1) {if (i <&＃61; e2) {const nextPos &＃61; e2 &＃43; 1const anchor &＃61; nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchorwhile (i <&＃61; e2) {patch(null,(c2[i] &＃61; optimized? cloneIfMounted(c2[i] as VNode): normalizeVNode(c2[i])),container,anchor,parentComponent,parentSuspense,isSVG)i&＃43;&＃43;}}}// 4、如果新节点遍历完了&＃xff0c;还有旧的节点&＃xff0c;那么旧节点就是移除的// 4. common sequence &＃43; unmount// (a b) c// (a b)// i &＃61; 2, e1 &＃61; 2, e2 &＃61; 1// a (b c)// (b c)// i &＃61; 0, e1 &＃61; 0, e2 &＃61; -1else if (i > e2) {while (i <&＃61; e1) {unmount(c1[i], parentComponent, parentSuspense, true)i&＃43;&＃43;}}// 5、如果中间存在不知道如何排列的位置序列&＃xff0c;那么就是用key建立索引图最大限度的使用旧节点// 5. unknown sequence// [i ... e1 &＃43; 1]: a b [c d e] f g// [i ... e2 &＃43; 1]: a b [e d c h] f g// i &＃61; 2, e1 &＃61; 4, e2 &＃61; 5else {const s1 &＃61; i // prev starting indexconst s2 &＃61; i // next starting index// 5.1 build key:index map for newChildrenconst keyToNewIndexMap: Map<string | number, number> &＃61; new Map()for (i &＃61; s2; i <&＃61; e2; i&＃43;&＃43;) {const nextChild &＃61; (c2[i] &＃61; optimized? cloneIfMounted(c2[i] as VNode): normalizeVNode(c2[i]))if (nextChild.key !&＃61; null) {if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) {warn(&＃96;Duplicate keys found during update:&＃96;,JSON.stringify(nextChild.key),&＃96;Make sure keys are unique.&＃96;)}keyToNewIndexMap.set(nextChild.key, i)}}// 5.2 loop through old children left to be patched and try to patch// matching nodes & remove nodes that are no longer presentlet jlet patched &＃61; 0const toBePatched &＃61; e2 - s2 &＃43; 1let moved &＃61; false// used to track whether any node has movedlet maxNewIndexSoFar &＃61; 0// works as Map// Note that oldIndex is offset by &＃43;1// and oldIndex &＃61; 0 is a special value indicating the new node has// no corresponding old node.// used for determining longest stable subsequenceconst newIndexToOldIndexMap &＃61; new Array(toBePatched)for (i &＃61; 0; i < toBePatched; i&＃43;&＃43;) newIndexToOldIndexMap[i] &＃61; 0for (i &＃61; s1; i <&＃61; e1; i&＃43;&＃43;) {const prevChild &＃61; c1[i]if (patched >&＃61; toBePatched) {// all new children have been patched so this can only be a removalunmount(prevChild, parentComponent, parentSuspense, true)continue}let newIndexif (prevChild.key !&＃61; null) {newIndex &＃61; keyToNewIndexMap.get(prevChild.key)} else {// key-less node, try to locate a key-less node of the same typefor (j &＃61; s2; j <&＃61; e2; j&＃43;&＃43;) {if (newIndexToOldIndexMap[j - s2] &＃61;&＃61;&＃61; 0 &&isSameVNodeType(prevChild, c2[j] as VNode)) {newIndex &＃61; jbreak}}}if (newIndex &＃61;&＃61;&＃61; undefined) {unmount(prevChild, parentComponent, parentSuspense, true)} else {newIndexToOldIndexMap[newIndex - s2] &＃61; i &＃43; 1if (newIndex >&＃61; maxNewIndexSoFar) {maxNewIndexSoFar &＃61; newIndex} else {moved &＃61; true}patch(prevChild,c2[newIndex] as VNode,container,null,parentComponent,parentSuspense,isSVG,optimized)patched&＃43;&＃43;}}// 5.3 move and mount// generate longest stable subsequence only when nodes have movedconst increasingNewIndexSequence &＃61; moved? getSequence(newIndexToOldIndexMap): EMPTY_ARRj &＃61; increasingNewIndexSequence.length - 1// looping backwards so that we can use last patched node as anchorfor (i &＃61; toBePatched - 1; i >&＃61; 0; i--) {const nextIndex &＃61; s2 &＃43; iconst nextChild &＃61; c2[nextIndex] as VNodeconst anchor &＃61;nextIndex &＃43; 1 < l2 ? (c2[nextIndex &＃43; 1] as VNode).el : parentAnchorif (newIndexToOldIndexMap[i] &＃61;&＃61;&＃61; 0) {// mount newpatch(null,nextChild,container,anchor,parentComponent,parentSuspense,isSVG)} else if (moved) {// move if:// There is no stable subsequence (e.g. a reverse)// OR current node is not among the stable sequenceif (j < 0 || i !&＃61;&＃61; increasingNewIndexSequence[j]) {move(nextChild, container, anchor, MoveType.REORDER)} else {j--}}}}}


使用KEY的过程如下图

总结&＃xff1a;Vue在进行diff算法的时候&＃xff0c;会尽量利用我们的key来进行优化操作
1、在没有key的时候我们的效率是非常低效的
2、在进行插入或者重置顺序的时候&＃xff0c;保持相同的key可以让diff算法更加的高效