从源码入手，探究vue中key的作用和工作原理

前言

说起vue中的key，只要使用vue那肯定是都使用过。要说作用嘛，大家大概都了解，不就是组件或者元素的复用和渲染吗？可是其中的原理又是什么呢？下面我们来深入源码一探究竟，let‘go！

key值的作用

key值大多情况下使用在循环语句中，从本质来讲主要作用大概有以下两点：

1. 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。
2. 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算法时候发挥作用。一个是用来判断新旧Vnode是否为同一个，从而进行下一步的比较以及渲染。另外一个作用就是判断组件是否可以复用，是否需要重新渲染。