前言说到vue中的key，只要你用过vue，就一定用过。至于功能，大家应该都知道吧，不就是组件或者元素的复用和渲染吗？但其背后的原理是什么？让我们深入源码一探究竟，走吧！键值的作用键值主要用在循环语句中。本质上主要有两个作用：主要用在Vue的虚拟DOM算法中，在新旧节点比较时识别VNodes，相当于一个唯一的ID。Vue会尽可能高效地渲染元素，通常会复用已有的元素而不是从头开始渲染，所以使用键值可以提高渲染效率。同样，更改元素的键值将导致重新呈现该元素。工作原理那么key值的工作原理是什么？直接上传源码//因为key值主要用在虚拟DOM算法中，也就是diff算法。所以我们在src\core\vdom\patch.js文件中从源码层面来讨论//这里先说核心方法patch。该方法在vue更新时执行，即render函数（虚拟DOM生成的函数）转换为真实DOM时执行。主要是第一次渲染创建真实DOM树，直接比较虚拟DOM节点，更新一系列真实DOM操作，会进行一系列判断和兼容性处理，包括key值的具体使用//这个方法主要是在patch方法中调用//方法名很有语义sameVnode===同一个虚拟DOM节点函数sameVnode(a,b){return(//判断两个Vnode上的key值是否相同a和b相等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.判断双方是否为同一个组件的关键if(isTrue(vnode.isStatic)&&isTrue(oldVnode.isStatic)&&vnode.key===oldVnode.key&&(isTrue(vnode.isCloned)||isTrue(vnode.isOnce))){vnode.componentInstance=oldVnode.componentInstancereturn}结论从例子中可以看出，对Vnode打补丁有时会调用sameVnode方法，该方法会根据key值是否相等来判断Vnode是否相同，作为比较过程中组件复用的判断条件。所以键值在DOM树执行diff算法时起到了作用。一个用于判断新旧Vnode是否相同，以便进行下一步的对比渲染。另一个作用是判断组件是否可以复用，是否需要重新渲染。
