vue中使用v-for时为什么不能用index作为key


Posted in Javascript onApril 04, 2020

结论:

  • 更新DOM的时候会出现性能问题
  • 会发生一些状态bug
  • React 中的 key 也是如此
  • 如果已经了解 为什么要用key,可以通过目录直接跳到下一节。

为什么要用key?

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:

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

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

用一张图简单说明一下:

vue中使用v-for时为什么不能用index作为key

当页面的数据发生变化时,Diff算法只会比较同一层级的节点:

如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点。

如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。

举个栗子:

vue中使用v-for时为什么不能用index作为key

我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:

vue中使用v-for时为什么不能用index作为key

即把C更新成F,D更新成C,E更新成D,最后再插入E,这样效率不高,且性能不够好。

但是,如果使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

vue中使用v-for时为什么不能用index作为key

总而言之,key的作用主要是为了高效的更新虚拟DOM 。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。

这里,也建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单。

为什么不能用index作为key?

举个栗子:

<template>
  <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
</template>
const list = [
  {
    id: 1,
    name: "Person1"
  },
  {
    id: 2,
    name: "Person2"
  },
  {
    id: 3,
    name: "Person3"
  },
  {
    id:4,
    name:"Person4"
  }
];

此时,删除 “Person4” 是正常的,但是如果我删除 “Person2” 就会出现问题。

删除前

key id index name
0 1 0 Person1
1 2 1 Person2
2 3 2 Person3
3 4 3 Person4

删除后

key id index name
0 1 0 Person1
1 3 1 Person3
2 4 2 Person4

这个时候,除了 Person1 之外,剩下的 Person3、Person4,因为被发现与相应 key 的绑定关系有变化,所以被重新渲染,这会影响性能。
如果此时 list 的 item 是 select 的选项,其中 Person3 是选中的,这个时候 Person2 被删除了,用 index 作为 key 就会变成是 Person4 选中的了,这就产生了bug。

如果使用唯一id作为key,删除 Person2 后,剩下的元素因为与 key 的关系没有发生变化,都不会被重新渲染,从而达到提升性能的目的。此时,list 的 item 作为 select 的选项,也不会出现上面所描述的bug。

到此这篇关于vue中使用v-for时为什么不能用index作为key的文章就介绍到这了,更多相关vue v-for不能用index作为key内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
js实现每日签到功能
Nov 29 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
详解JavaScript 事件流
Sep 02 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 #Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 #Javascript
Vue的data、computed、watch源码浅谈
Apr 04 #Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 #Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 #Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 #Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 #Javascript
You might like
PHP正确配置mysql(apache环境)
2011/08/28 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
python 垃圾收集机制的实例详解
2017/08/20 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python 二维数组90度旋转的方法
2019/01/28 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
Django中template for如何使用方法
2021/01/31 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
this关键字的含义
2015/04/08 面试题
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
《刷子李》教学反思
2016/02/20 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android