Vue 中的 Key 的作用是什么

key 的作用主要是为了高效的更新虚拟 DOM 。另外 vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。 其实不只是 vue，react 中在执行列表渲染时也会要求给每个组件添加上 key 这个属性。 要解释 key 的作用，不得不先介绍一下虚拟 DOM 的 Diff 算法了。 我们知道，vue 和 react 都实现了一套虚拟 DOM，使我们可以不直接操作 DOM 元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的 Diff 算法。 vue 和 react 的虚拟 DOM 的 Diff 算法大致相同，其核心有以下两点：

两个相同的组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构。 同一层级的一组节点，他们可以通过唯一的 id 进行区分。

基于以上这两点，使得虚拟 DOM 的 Diff 算法的复杂度从 O(n^3) 降到了 O(n) 。