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

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

patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)

/*創(chuàng)建一個組件節(jié)點，返回Vnode節(jié)點*/
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é)點，本質(zhì)上是一個占位節(jié)點，在實際dom中并沒有
   * 當(dāng)出現(xiàn) <HelloWorld></HelloWorld>  這種組件節(jié)點時，
   * 會相應(yīng)生成一個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節(jié)點*/
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"。*/
    // 根據(jù)vnode，更新oldVnode子組件實例對應(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
  //實例覆蓋：將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
  )