从源码入手，探究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是否为同一个，从而进行下一步的比较以及渲染。另一个做用就是判断组件是否能够复用，是否须要从新渲染。