vue中key的作用和工作原理

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是否为同一个，从而进行下一步的比较以及渲染。另外一个作用就是判断组件是否可以复用，是否需要重新渲染。

原文：https://www.cnblogs.com/whkl-m/p/12924831.html