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

/*
  判斷兩個(gè)VNode節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)，需要滿足以下條件
  key相同
  tag（當(dāng)前節(jié)點(diǎn)的標(biāo)簽名）相同
  isComment（是否為注釋節(jié)點(diǎn)）相同
  是否data（當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象，包含了具體的一些數(shù)據(jù)信息，是一個(gè)VNodeData類型，可以參考VNodeData類型中的數(shù)據(jù)信息）都有定義
  當(dāng)標(biāo)簽是<input>的時(shí)候，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) {
  ...
  //新舊首尾互比之后
  /*
          生成一個(gè)key與舊VNode的key對(duì)應(yīng)的哈希表（只有第一次進(jìn)來(lái)undefined的時(shí)候會(huì)生成，也為后面檢測(cè)重復(fù)的key值做鋪墊）
          比如childre是這樣的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
          結(jié)果生成{key0: 0, key1: 1, key2: 2}
        */
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        /*如果newStartVnode新的VNode節(jié)點(diǎn)存在key并且這個(gè)key在oldVnode中能找到則返回這個(gè)節(jié)點(diǎn)的idxInOld（即第幾個(gè)節(jié)點(diǎn)，下標(biāo)）*/
        idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
        if (isUndef(idxInOld)) { // New element
          /*newStartVnode沒(méi)有key或者是該key沒(méi)有在老節(jié)點(diǎn)中找到則創(chuàng)建一個(gè)新的節(jié)點(diǎn)*/
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
          newStartVnode = newCh[++newStartIdx]
        } else {
          /*獲取同key的老節(jié)點(diǎn)*/
          elmToMove = oldCh[idxInOld]
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !elmToMove) {
            /*如果elmToMove不存在說(shuō)明之前已經(jīng)有新節(jié)點(diǎn)放入過(guò)這個(gè)key的Dom中，提示可能存在重復(fù)的key，確保v-for的時(shí)候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的節(jié)點(diǎn)是同一個(gè)VNode則進(jìn)行patchVnode*/
            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
            /*因?yàn)橐呀?jīng)patchVnode進(jìn)去了，所以將這個(gè)老節(jié)點(diǎn)賦值undefined，之后如果還有新節(jié)點(diǎn)與該節(jié)點(diǎn)key相同可以檢測(cè)出來(lái)提示已有重復(fù)的key*/
            oldCh[idxInOld] = undefined
            /*當(dāng)有標(biāo)識(shí)位canMove實(shí)可以直接插入oldStartVnode對(duì)應(yīng)的真實(shí)Dom節(jié)點(diǎn)前面*/
            canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
            newStartVnode = newCh[++newStartIdx]
          } else {
            // same key but different element. treat as new element
            /*當(dāng)新的VNode與找到的同樣key的VNode不是sameVNode的時(shí)候（比如說(shuō)tag不一樣或者是有不一樣type的input標(biāo)簽），創(chuàng)建一個(gè)新的節(jié)點(diǎn)*/
            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的節(jié)點(diǎn)是同一個(gè)VNode則進(jìn)行patchVnode*/
  patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
  /*因?yàn)橐呀?jīng)patchVnode進(jìn)去了，所以將這個(gè)老節(jié)點(diǎn)賦值undefined，之后如果還有新節(jié)點(diǎn)與該節(jié)點(diǎn)key相同可以檢測(cè)出來(lái)提示已有重復(fù)的key*/
  oldCh[idxInOld] = undefined
  /*當(dāng)有標(biāo)識(shí)位canMove實(shí)可以直接插入oldStartVnode對(duì)應(yīng)的真實(shí)Dom節(jié)點(diǎn)前面*/
  canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
  newStartVnode = newCh[++newStartIdx]
}

patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)

/*創(chuàng)建一個(gè)組件節(jié)點(diǎn)，返回Vnode節(jié)點(diǎn)*/
export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data?: VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | void {
  //.....
// return a placeholder vnode
  /** 組件節(jié)點(diǎn)，本質(zhì)上是一個(gè)占位節(jié)點(diǎn)，在實(shí)際dom中并沒(méi)有
   * 當(dāng)出現(xiàn) <HelloWorld></HelloWorld>  這種組件節(jié)點(diǎn)時(shí)，
   * 會(huì)相應(yīng)生成一個(gè)tag為vue-component-xx-hellowrold的占位vnode
   * 占位vnode沒(méi)有children
   */
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined/** 組件是沒(méi)有children的 */, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children }/** componentOptions */
  )
  return vnode
}

/*patch VNode節(jié)點(diǎn)*/
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，如果存在的話，見(jiàn)"./create-component componentVNodeHooks"。*/
    // 根據(jù)vnode，更新oldVnode子組件實(shí)例對(duì)應(yīng)的相關(guān)屬性
    i(oldVnode, vnode)
  }
  //這里復(fù)用，直接將oldVnode的dom賦給了vnode
  const elm = vnode.elm = oldVnode.elm
  const oldCh = oldVnode.children
  const ch = vnode.children
  if (isDef(data) && isPatchable(vnode)) {
    /*調(diào)用update回調(diào)以及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相關(guān)的數(shù)據(jù)在componentOptions里
  const options = vnode.componentOptions
  //實(shí)例覆蓋：將oldVnode的實(shí)例直接賦值給了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
  )