vue中关于v-for循环key值问题的研究

A.key(undefined )=== B.key(undefined) 

/*
  判断两个VNode节点是否是同一个节点，需要满足以下条件
  key相同
  tag（当前节点的标签名）相同
  isComment（是否为注释节点）相同
  是否data（当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息）都有定义
  当标签是<input>的时候，type必须相同
*/
function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
}

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  ...
  //新旧首尾互比之后
  /*
          生成一个key与旧VNode的key对应的哈希表（只有第一次进来undefined的时候会生成，也为后面检测重复的key值做铺垫）
          比如childre是这样的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
          结果生成{key0: 0, key1: 1, key2: 2}
        */
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        /*如果newStartVnode新的VNode节点存在key并且这个key在oldVnode中能找到则返回这个节点的idxInOld（即第几个节点，下标）*/
        idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
        if (isUndef(idxInOld)) { // New element
          /*newStartVnode没有key或者是该key没有在老节点中找到则创建一个新的节点*/
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
          newStartVnode = newCh[++newStartIdx]
        } else {
          /*获取同key的老节点*/
          elmToMove = oldCh[idxInOld]
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !elmToMove) {
            /*如果elmToMove不存在说明之前已经有新节点放入过这个key的Dom中，提示可能存在重复的key，确保v-for的时候item有唯一的key值*/
            warn(
              'It seems there are duplicate keys that is causing an update error. ' +
              'Make sure each v-for item has a unique key.'
            )
          }
          if (sameVnode(elmToMove, newStartVnode)) {
            /*如果新VNode与得到的有相同key的节点是同一个VNode则进行patchVnode*/
            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
            /*因为已经patchVnode进去了，所以将这个老节点赋值undefined，之后如果还有新节点与该节点key相同可以检测出来提示已有重复的key*/
            oldCh[idxInOld] = undefined
            /*当有标识位canMove实可以直接插入oldStartVnode对应的真实Dom节点前面*/
            canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
            newStartVnode = newCh[++newStartIdx]
          } else {
            // same key but different element. treat as new element
            /*当新的VNode与找到的同样key的VNode不是sameVNode的时候（比如说tag不一样或者是有不一样type的input标签），创建一个新的节点*/
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
            newStartVnode = newCh[++newStartIdx]
          }
        }
  ...
}

[{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]；

[{xx: xx, key: 'key1'}, {xx: xx, key: 'key3'}, {xx: xx, key: ‘key2'}]

patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

<div class="list">
     <child v-for="(item, i) in list" :data="item" :key="i" @del="onDelChild" ></child>
</div>
<script>
export default {
  data() {
    return {
      list: [
        { text: "circle", id: 1 },
        { text: "trangle", id: 2 },
        { text: "square", id: 3 }
      ]
    };
  },
  methods: {
    onDelChild(item) {
      const idx = this.list.findIndex(it => it.id == item.id);
      this.list.splice(idx, 1);
    }
  }
};
</script>

<template>
  <div>
    {{ data.id }}
    <input v-model="text" />
    <button @click="onDel">delete</button>
    <span @click="onClick">{{ staticText }}</span>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      text: "hello",
      staticText: "click Me"
    };
  },
  methods: {
    onDel() {
      this.$emit("del", this.data);
    },
    onClick() {
      this.staticText = "clicked";
    }
  }
};
</script>

<div>
    {{ data.id }}
    <input v-model="data.text" />
    <button @click="onDel">delete</button>
  </div>

if (sameVnode(elmToMove, newStartVnode)) {
  /*如果新VNode与得到的有相同key的节点是同一个VNode则进行patchVnode*/
  patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
  /*因为已经patchVnode进去了，所以将这个老节点赋值undefined，之后如果还有新节点与该节点key相同可以检测出来提示已有重复的key*/
  oldCh[idxInOld] = undefined
  /*当有标识位canMove实可以直接插入oldStartVnode对应的真实Dom节点前面*/
  canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
  newStartVnode = newCh[++newStartIdx]
}

patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)

/*创建一个组件节点，返回Vnode节点*/
export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data?: VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | void {
  //.....
// return a placeholder vnode
  /** 组件节点，本质上是一个占位节点，在实际dom中并没有
   * 当出现 <HelloWorld></HelloWorld>  这种组件节点时，
   * 会相应生成一个tag为vue-component-xx-hellowrold的占位vnode
   * 占位vnode没有children
   */
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined/** 组件是没有children的 */, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children }/** componentOptions */
  )
  return vnode
}

/*patch VNode节点*/
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  ...
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    /*i = data.hook.prepatch，如果存在的话，见"./create-component componentVNodeHooks"。*/
    // 根据vnode，更新oldVnode子组件实例对应的相关属性
    i(oldVnode, vnode)
  }
  //这里复用，直接将oldVnode的dom赋给了vnode
  const elm = vnode.elm = oldVnode.elm
  const oldCh = oldVnode.children
  const ch = vnode.children
  if (isDef(data) && isPatchable(vnode)) {
    /*调用update回调以及update钩子*/
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }
  ...
}

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  //props相关的数据在componentOptions里
  const options = vnode.componentOptions
  //实例覆盖：将oldVnode的实例直接赋值给了vnode
  const child = vnode.componentInstance = oldVnode.componentInstance
  updateChildComponent(
    child,
    options.propsData, // updated props
    options.listeners, // updated listeners
    vnode, // new parent vnode
    options.children // new children
  )
}

updateChildComponent(
    child,
    options.propsData, // updated props
    options.listeners, // updated listeners
    vnode, // new parent vnode
    options.children // new children
  )