扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue 中为什么不推荐用index 做 key属性值
  • 922

0
分享到

Vue 中为什么不推荐用index 做 key属性值

2024-04-02 19:04:59 922人浏览 泡泡鱼
摘要

目录前言key 的作用key 在 diff 算法中的角色同步头部节点同步尾部节点添加新的节点删除多余节点最长递增子序列为什么不要用 index性能消耗数据错位解决方案总结前言 前端开

前言

前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

key 的作用

Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用。

key 在 diff 算法中的角色

其实在 React，Vue 中 diff 算法大致是差不多，但是 diff 比对方式还是有较大差异的，甚至每个版本 diff 都大有不同。下面我们就以 vue3.0 diff 算法为切入点，剖析 key 在 diff 算法中的作用

具体 diff 流程如下

图片

Vue3.0 中 在 patchChildren 方法中有这么一段源码


if (patchFlag > 0) {
      if (patchFlag & PatchFlags.KEYED_FRAGMENT) { 
         
        patchKeyedChildren(
         ...
        )
        return
      } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
         
        patchUnkeyedChildren( 
          ...
        )
        return
      }
    }

patchChildren 根据是否存在 key 进行真正的 diff 或者直接 patch。对于 key 不存在的情况我们就不做深入研究了。

我们先来看看一些声明的变量。



let i = 0              
const l2 = c2.length   
let e1 = c1.length - 1 
let e2 = l2 - 1

同步头部节点

第一步的事情就是从头开始寻找相同的 vnode，然后进行 patch，如果发现不是相同的节点，那么立即跳出循环。


//(a b) c
//(a b) d e

    while (i <= e1 && i <= e2) {
      const n1 = c1[i]
      const n2 = (c2[i] = optimized
        ? cloneIfMounted(c2[i] as VNode)
        : nORMalizeVNode(c2[i]))
        
      if (isSameVNodeType(n1, n2)) {
        patch(
          ...
        )
      } else {
        break
      }
      i++
    }

流程如下：

图片

isSameVNodeType 作用就是判断当前 vnode 类型 和 vnode 的 key 是否相等


export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

其实看到这，已经知道 key 在 diff 算法的作用，就是用来判断是否是同一个节点。

同步尾部节点

第二步从尾开始同前 diff


//a (b c)
//d e (b c)

    while (i <= e1 && i <= e2) {
      const n1 = c1[e1]
      const n2 = (c2[e2] = optimized
        ? cloneIfMounted(c2[e2] as VNode)
        : normalizeVNode(c2[e2]))
      if (isSameVNodeType(n1, n2)) {
        patch(
         ...
        )
      } else {
        break
      }
      e1--
      e2--
    }

经历第一步操作之后，如果发现没有 patch 完，那么立即进行第二步，从尾部开始遍历依次向前 diff。如果发现不是相同的节点，那么立即跳出循环。流程如下：

添加新的节点

第三步如果老节点是否全部 patch，新节点没有被 patch 完，创建新的 vnode


//(a b)
//(a b) c
//i = 2, e1 = 1, e2 = 2
//(a b)
//c (a b)
//i = 0, e1 = -1, e2 = 0

    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1
        const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
        while (i <= e2) {
          patch( 
            ...
          )
          i++
        }
      }
    }

流程如下：

图片

删除多余节点

第四步如果新节点全部被 patch，老节点有剩余，那么卸载所有老节点


//i > e2
//(a b) c
//(a b)
//i = 2, e1 = 2, e2 = 1
//a (b c)
//(b c)
//i = 0, e1 = 0, e2 = -1
else if (i > e2) {
   while (i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)
      i++
   }
}

流程如下：

最长递增子序列

到了这一步，比较核心的场景还没有出现，如果运气好，可能到这里就结束了，那我们也不能全靠运气。剩下的一个场景是新老节点都还有多个子节点存在的情况。那接下来看看，Vue3 是怎么做的。为了结合 move、新增和卸载的操作

每次在对元素进行移动的时候，我们可以发现一个规律，如果想要移动的次数最少，就意味着需要有一部分元素是稳定不动的，那么究竟能够保持稳定不动的元素有一些什么规律呢？

可以看一下上面这个例子：c  h  d  e  VS  d  e  i  c，在比对的时候，凭着肉眼可以看出只需要将 c 进行移动到最后，然后卸载 h，新增 i 就好了。d  e 可以保持不动，可以发现 d  e 在新老节点中的顺序都是不变的，d 在 e 的后面，下标处于递增状态。

这里引入一个概念，叫最长递增子序列。
官方解释：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。
有点比较难理解，那来看具体例子：
 
const arr = [10, 9, 2, 5, 3, 7, 101, 18]
=> [2, 3, 7, 18]
这一列数组就是arr的最长递增子序列，其实[2, 3, 7, 101]也是。
所以最长递增子序列符合三个要求：
1、子序列内的数值是递增的
2、子序列内数值的下标在原数组中是递增的
3、这个子序列是能够找到的最长的
但是我们一般会找到数值较小的那一组数列，因为他们可以增长的空间会更多。

那接下来的思路是：如果能找到老节点在新节点序列中顺序不变的节点们，就知道，哪一些节点不需要移动，然后只需要把不在这里的节点插入进来就可以了。因为最后要呈现出来的顺序是新节点的顺序，移动是只要老节点移动，所以只要老节点保持最长顺序不变，通过移动个别节点，就能够跟它保持一致。 所以在此之前，先把所有节点都找到，再找对应的序列。最后其实要得到的则是这一个数组：[2, 3, 新增 , 0]。其实这就是 diff 移动的思路了

图片

为什么不要用 index

性能消耗

使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。

例子：


<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>
 
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们先把 Chorme 调试器打开，我们双击把里面文本修改一下

图片

我们运行以上上面的代码，看下运行结果

图片

从上面运行结果可以看出来，我们只是添加了一条数据，但是三条数据都需要重新渲染是不是很惊奇，我明明只是插入了一条数据，怎么三条数据都要重新渲染？而我想要的只是新增的那一条数据新渲染出来就行了。

上面我们也讲过 diff 比较方式,下面根据 diff 比较绘制一张图，看看具体是怎么比较的吧

图片

当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。

下面我们下面生成 1000 个 DOM 来比较一下采用 index ，和不采用 index 性能比较，为了保证 key 的唯一性我们采用 uuid 作为 key

我们用 index 做为 key 先执行一遍


<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="index">{{item.id}}</li>
    </ul>
  </div>
</template>
 
<script>
import uuidv1 from 'uuid/v1'
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [{id:uuidv1()}],
    };
  },
  created(){
    for (let i = 0; i < 1000; i++) {
      this.studentList.push({
        id: uuidv1(),
      });
    }
  },
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 75.259033203125 ms
  },
  methods:{
    addStudent(){
      const studentObj = { id: uuidv1() };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

换成 id 作为 key


<template>
  <div class="hello">
    <ul>
      <button @click="addStudent">添加一条数据</button>
      <br>
      <li v-for="(item,index) in studentList" :key="item.id">{{item.id}}</li>
    </ul>
  </div>
</template>
  beforeUpdate(){
    console.time('for');
  },
  updated(){
    console.timeEnd('for')//for: 42.200927734375 ms
  },

从上面比较可以看出，用唯一值作为 key 可以节约开销

数据错位

上述例子可能觉得用 index 做 key 只是影响页面加载的效率，认为少量的数据影响不大，那下面这种情况，用 index 就可能出现一些意想不到的问题了，还是上面的场景，这时我先再每个文本内容后面加一个 input 输入框，并且手动在输入框内填写一些内容，然后通过 button 向前追加一位同学看看


<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{item.name}}<input /></li>
      <br>
      <button @click="addStudent">添加一条数据</button>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      studentList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
      ],
    };
  },
  methods:{
    addStudent(){
      const studentObj = { id: 3, name: '王五', age: 20 };
      this.studentList=[studentObj,...this.studentList]
    }
  }
}
</script>

我们往 input 里面输入一些值，添加一位同学看下效果：

图片

这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。

图片

从上面比对可以看出来这时因为采用 index 作为 key 时，当在比较时，发现虽然文本值变了，但是当继续向下比较时发现 Input DOM 节点还是和原来一摸一样，就复用了，但是没想到 input 输入框残留输入的值，这时候就会出现输入的值出现错位的情况

解决方案

既然知道用 index 在某些情况下带来很不好的影响，那平时我们在开发当中怎么去解决这种情况呢？其实只要保证 key 唯一不变就行，一般在开发中用的比较多就是下面三种情况。

  • 在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
  • 可以采用 Symbol 作为 key，Symbol 是 es6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let a=Symbol('测试')
let b=Symbol('测试')
console.log(a===b)//false

可以采用 uuid 作为 key ，uuid 是 Universally Unique Identifier 的缩写，它是在一定的范围内（从特定的名字空间到全球）唯一的机器生成的标识符

我们采用上面第一种方案作为 key 再看一下上面情况，如图所示。key 相同的节点都做到了复用。起到了diff 算法的真正作用。

图片

图片

图片

总结

  • 用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低
  • 用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新
  • 在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值
  • 如果不存在对数据逆序添加，逆序删除等破坏顺序的操作时，仅用于渲染展示用时，使用 index 作为 key 也是可以的（但是还是不建议使用，养成良好开发习惯）。

到此这篇关于在 Vue 中为什么不推荐用 index 做 key的文章就介绍到这了,更多相关Vue index 做 key内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue 中为什么不推荐用index 做 key属性值

本文链接: https://lsjlt.com/news/156284.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue 中为什么不推荐用index 做 key属性值
    目录前言key 的作用key 在 diff 算法中的角色同步头部节点同步尾部节点添加新的节点删除多余节点最长递增子序列为什么不要用 index性能消耗数据错位解决方案总结前言 前端开...
    99+
    2024-04-02
  • Vue中为什么不推荐用index做key详解
    目录前言diff算法key的作用通过 key 管理状态效率 & Bug总结前言 尤大在vue 2.x的文档中明确指出：建议尽可能在使用 v-for 时提供...
    99+
    2024-04-02
  • react为什么不推荐使用index作为key
    1.旧的虚拟dom和新的虚拟dom对比，首先看他们的key是否相同 2.相同继续对比他们的内容，不同生成新的真实dom进行替换 3.如果内容和key都相同，复用旧的真实dom 不做改...
    99+
    2024-04-02
  • Vue中不推荐用index做key的原因有哪些
    这篇文章主要介绍了Vue中不推荐用index做key的原因有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前端开发中，只要涉及到列表渲染，那么无论是 React 还是 V...
    99+
    2023-06-21
  • 在vue中为什么不能用index作为key
    目录一、key的作用是什么？二、什么是虚拟DOM？三、什么是diff算法四、为什么不能用index作为key？（1）index不能作为key--情景一（2）index不能作为key-...
    99+
    2024-04-02
  • 为什么不推荐使用C++
    这篇文章主要讲解了“为什么不推荐使用C++”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“为什么不推荐使用C++”吧！(1) C++语法很复杂，好的C++程序员难求。语法上 C++14 开始的...
    99+
    2023-06-16
  • vue中v-for为什么要加key值
    这篇文章主要为大家展示了“vue中v-for为什么要加key值”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中v-for为什么要加key值”这篇文章吧。v...
    99+
    2024-04-02
  • 为什么java不推荐使用vector
    从网上各处搜集的知识整理出来1.因为vector是线程安全的，所以效率低，这容易理解，类似StringBuffer2.Vector空间满了之后，扩容是一倍，而ArrayList仅仅是一半3.Vector分配内存的时候需要连续的存储空间，如果...
    99+
    2023-06-03
  • 为什么css属性值clear:right不起作用
    这篇文章主要介绍“为什么css属性值clear:right不起作用”，在日常操作中，相信很多人在为什么css属性值clear:right不起作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”为什么css属性值...
    99+
    2023-06-08
  • CSS中z-index属性有什么用
    小编给大家分享一下CSS中z-index属性有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　z-index描述如下...
    99+
    2024-04-02
  • html列表中的key属性有什么用
    这篇文章给大家分享的是有关html列表中的key属性有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 diff 算法的时间复杂度是 O(n), 它的实现是基于以下两个假设...
    99+
    2024-04-02
  • Spring为什么不推荐使用@Autowired注解详析
    目录引言 Spring的三种注入方式 属性（filed）注入 构造器注入 set方法注入 属性注入可能出现的问题 问题一 问题二 问题三 spring建议使用@Resource代替@...
    99+
    2024-04-02
  • css中border属性用于做什么
    css 中的 border 属性定义元素边框的外观，包括宽度、样式和颜色。它使用以下属性参数：宽度：指定边框的宽度，单位可以是像素 (px)、em 或其他 css 单位。样式：定义边框的...
    99+
    2024-04-28
    css
  • 为什么Spring和IDEA都不推荐使用@Autowired注解
    目录前言Spring为什么不推荐使用@Autowired 注解背景原因解决思考@Autowired, @Qualifier, @Resource, 三者有何区别参考文档前言 请看下面...
    99+
    2024-04-02
  • Spring和IDEA为什么都不推荐使用@Autowired注解
    今天小编给大家分享一下Spring和IDEA为什么都不推荐使用@Autowired注解的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解...
    99+
    2023-06-29
  • 浅谈为什么MySQL不推荐使用子查询和join
    做分页查询： 对于mysql，不推荐使用子查询和join是因为本身join的效率就是硬伤，一旦数据量很大效率就很难保证，强烈推荐分别根据索引单表取数据，然后在程序里面做join，merge数据。 2.子查询就更别用...
    99+
    2022-05-29
    MySQL 子查询和join MySQL 子查询 MySQL join
  • vue为什么不用中文
    Vue为什么选择不使用中文？Vue是一种流行的JavaScript框架，用于构建动态用户界面。相比于其他框架，Vue更为简单、直观、高效。然而，尽管该框架在全球范围内广受欢迎，却选择不使用中文。那么，Vue为什么不用中文呢？首先，需要明确的...
    99+
    2023-05-14
  • 解析Idea为什么不推荐使用@Autowired进行Field注入
    目录Spring常见的DI方式@Autowired VS @Resource各种DI方式的优缺点Field注入的缺点为什么IDEA只对@Autowired警告大家在使用IDEA开发的...
    99+
    2024-04-02
  • vue中mixins属性的作用是什么
    本篇文章给大家分享的是有关vue中mixins属性的作用是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。mixin.js 文件import...
    99+
    2024-04-02
  • vue中组件的props属性有什么用
    这篇文章主要介绍vue中组件的props属性有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！问题一：那props具体是怎么使用呢？原理又是什么呢？往下看1、【定义被调用组件】首先，我们先定义一个person组件...
    99+
    2023-06-25
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作