【Vue3 基础加餐篇】07.key 的作用源码解析

Vue 中增加 key ，是为了更精准的定位到元素，从而减少渲染。那具体这个更精准的定位是什么？以及为什么能减少渲染呢？我们在这一章节讲述。

虚拟 DOM

要聊这个之前，必须要有虚拟 DOM 的概念，这个不得不聊。

虚拟对象就是一种用来描述真实 DOM 的 js 对象。这样我们就可以通过对比 vnode（虚拟 DOM 树的节点），知道需要更新的 DOM 结构。

关于真实 DOM 与虚拟 DOM 的关系，你可以看做真实 DOM 为真实的建筑，而虚拟 DOM 为建筑的结构图，通过虚拟 DOM 可以构建真实 DOM。

组件更新 patch

根据新旧子树的 vnode 执行 patch 进行组件更新，而 key 是 patch 中对比 vnode 不同的一个环节。

const patch = (
  n1,
  n2,
  container