前端面试~ vue 中 key 的作用和工作作原理

解析

key 在 vue 中，除了解决 list 渲染过程中一些隐蔽的 bug，提高渲染效率，以及在过渡过程中区分节点以外， 最主要的用途还是在 diff 算法中 。

首先要知道 vue 的更新流程：

reactiveSetter → dep.notify()→ watcher.update() → queueWatcher() → watcher.run() → updateComponent() → vm._render() → vm._update() → vm. patch () → patch()

而 key 起作用的位置则在 patch() 中。

要回答这个问题，除了要知道更新流程以外，还要知道 vue 的 diff 算法：首尾假猜策略。由于上文已经详细描述过了，这里就不再赘述。

在 diff 的过程中，首先需要判断两个节点是否是相同类型的节点，用到的方法如下：

function sameVnode(a, b) {
  return (
    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 &&