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

最新推荐文章于 2024-09-18 18:25:16 发布

WEB前端含光

最新推荐文章于 2024-09-18 18:25:16 发布

阅读量1.5k

点赞数 1

分类专栏：前端基础前端项目前端面试

本文链接：https://blog.csdn.net/arui_0/article/details/108455337

版权

本文介绍了Vue中key的主要用途在于diff算法，用于提高渲染效率和解决list渲染问题。通过对比设置了key和未设置key时的diff过程，阐述了key如何减少DOM操作，提升性能。

摘要由CSDN通过智能技术生成

解析

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 &&