1.key值的作用

主要用于v-for語(yǔ)法中

• 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes，相當(dāng)于唯一標(biāo)識(shí)ID
• Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染， 因此使用key值可以提高渲染效率，同理，改變某一元素的key值會(huì)使該元素重新被渲染
• vue中在使用相同標(biāo)簽名元素的過(guò)渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過(guò)渡效果

2.diff算法部分代碼

通過(guò)sameVnode方法來(lái)判斷vNode和oldNode是否是同一個(gè)節(jié)點(diǎn)，主要通過(guò)key值來(lái)判斷

 // src\core\vdom\patch.js
function sameVnode (a, b) {
    return (
        // 判斷a, b兩個(gè)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)
            )
        )
    )
}