ソースコードから着手して、vueの中でkeyの作用と動作原理を探究します

前言
vueのkeyといえば、vueを使えば全部使ったに違いない.役割といえば、コンポーネントや要素の多重化やレンダリングではないでしょうか.しかし、その原理は何なのか.次はソースコードに深く入り込んで、let'go!
key値の役割
key値はループ文で使用されることが多いが、本質的に主な役割は以下の2つである.

は主にVueの仮想DOMアルゴリズムに用いられ,新旧nodes対比時に唯一の識別IDに相当するVNodesを識別する.

Vueは、要素をできるだけ効率的にレンダリングし、通常はレンダリングを最初から開始するのではなく既存の要素を多重化するので、key値を使用するとレンダリング効率が向上します.同様に、要素のkey値を変更すると、要素が再レンダリングされます.

さぎょうげんり
ではkey値の動作原理はどうでしょうか.ダイレクトソース

//   key        DOM  ， diff   。     src\core\vdom\patch.js   ，         

//          patch。     vue  update，  render  (  DOM     )     DOM     ，            DOM ，    DOM       ，    DOM         ，               ，     key      

//        patch     
//         sameVnode ===     DOM  
function sameVnode (a, b) {
    return (
        //   a, b  Vnode  key     
        a.key === b.key && (
            (
                a.tag === b.tag &&
                a.isComment === b.isComment &&
                isDef(a.data) === isDef(b.data) &&
                sameInputType(a, b)
            ) || (
                isTrue(a.isAsyncPlaceholder) &&
                a.asyncFactory === b.asyncFactory &&
                isUndef(b.asyncFactory.error)
            )
        )
    )
}


//      patchVnode     ，      patch      ，         Vnode  ，  diff         

//      patchVnode   
//        ，           ，       diff  
// vnode.key === oldVnode.key            
if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
        vnode.componentInstance = oldVnode.componentInstance
        return
}

結論
例では,Vnodeにpatchを行うとsameVnodeメソッドが呼び出され,key値が等しいか否かを用いてVnodeが同一であるか否かが判断される.また,比較過程においてコンポーネント多重化の判断条件として用いられる.したがってkey値はDOMツリーがdiffアルゴリズムを行う際に機能する.1つは、新しいVnodeと古いVnodeが同じかどうかを判断し、次の比較とレンダリングを行うことです.もう1つの役割は、コンポーネントが多重化できるかどうか、再レンダリングが必要かどうかを判断することです.