工作158:vue里面为什么要加key

没有key

 

 <div id="app"><div><input type="text" v-model="name"><button @click="add">添加</button></div><ul><li v-for="(item, i) in list"><input type="checkbox"> {{item.name}}</li></ul>
<script>// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {name: '',newId: 3,list: [{ id: 1, name: '李斯' },{ id: 2, name: '吕不韦' },{ id: 3, name: '嬴政' }]},methods: {add() {//注意这里是unshiftthis.list.unshift({ id: ++this.newId, name: this.name })this.name = ''}}});</script></div>

当选中吕不为时,添加楠楠后选中的确是李斯,并不是我们想要的结果,我们想要的是当添加楠楠后,一种选中的是吕不为

key1.jpg

key3.jpg

有key

 

  <div id="app"><div><input type="text" v-model="name"><button @click="add">添加</button></div><ul><li v-for="(item, i) in list" :key="item.id"><input type="checkbox"> {{item.name}}</li></ul>
<script>// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {name: '',newId: 3,list: [{ id: 1, name: '李斯' },{ id: 2, name: '吕不韦' },{ id: 3, name: '嬴政' }]},methods: {add() {//注意这里是unshiftthis.list.unshift({ id: ++this.newId, name: this.name })this.name = ''}}});</script></div>

同样当选中吕不为时,添加楠楠后依旧选中的是吕不为。

key1.jpg

key2.jpg

可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

查过相关文档,图例说明很清晰。

vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设
首先讲一下diff算法的处理方法,对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:

 

before.png

当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。
比如一下这个情况:

 

3297464-ee627869a6714336.jpg

 

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

 

3297464-d912523aac5fd108.jpg


即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

 

3297464-650689b4bd4b9eb6.jpg

 

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新



作者:Nanshannan
链接:https://www.jianshu.com/p/4bd5e745ce95
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 人脸识别拍照demo

1、活体与照片。效果&#xff0c;捕获人脸 2、活体人脸识别&#xff1a;https://blog.csdn.net/meixi_android/article/details/88690445 运行效果&#xff1a; 自定义获取人脸view /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;13164716840163.com* 日期&#x…

多进程进阶

一 multiprocessing模块介绍 python中的多线程无法利用多核优势&#xff0c;如果想要充分地使用多核CPU的资源&#xff08;os.cpu_count()查看&#xff09;&#xff0c;在python中大部分情况需要使用多进程。Python提供了multiprocessing。 multiprocessing模块用来开启子进…

typescript 安装

记录基本的typescript 安装过程。 1、安装 查看最新的版本号 npm show typescript去npm服务器读取包最新的信息&#xff1a; npm install -g typescript使用tsc -v查看版本号 使用npm bin -g查看安装目录 2、使用tsc index.ts就可以将ts文件编译成js文件。 官方在线实练…

linux中修改字符编码

一. ubuntu修改字符编码 1. 添加字符编码&#xff0c;例如zh_CN.UTF-8&#xff0c;有两种方式 方法1&#xff1a;locale-gen zh_CN.UTF-8 #locale-gen命令只在ubuntu中才有 方法2&#xff1a;在/var/lib/locales/supported.d/local中添加字符集zh_CN.UTF-8&#xff0c;保存后…

iview代码片段 去除水平menu底部横线

此处记录日常写的小代码片段 直接使用iview的Menu在底部会出现一条border线&#xff0c;而我的使用场景&#xff0c;不需要border线。所以我就覆盖一下它原来的样式&#xff0c;就可以了。 代码&#xff1a; .ivu-menu-light {&:after {height: 0px !important;}}效果&a…

工作161:eachart渲染步骤

第一步 页面 第二步 第三步 方法调用

vue js xlsx 读取 本地 excel

最近在写一个人力资源管理系统&#xff0c;主要目的是将本地的excel文件读取解析&#xff0c;将有效数据传到后台。 下文介绍流程&#xff0c;文末附有参考文章。 1、安装npm包xlsx yarn add xlsx2、结合上传组件和自己写的读取方法readXLSX&#xff0c;可以进行本地excel读…

工作163:eachrt修改

<template><div><el-card><el-card><time-selects GetTime"GetTime"></time-selects><!--第一步 页面--><div id"main" :style"{ width: 1000px, height: 300px }"></div><div id&quo…

Android 使用ViewPager实现view轮播效果,单个item分页样式,多个item分页样式,横向listview

效果 单个item样式 多个item样式 横向item 自定义viewpager——可开关切换动画 public class NoAnimationViewPager extends ViewPager {public NoAnimationViewPager(Context context) {super(context);}public NoAnimationViewPager(Context context, AttributeSet attrs) …

工作164:对父和混入的理解

1点击按钮看编辑事件 2点击编辑之后 对当前页面的方法进行调用 3找到子组件下面的混入方法 create下面引入混入 4找到子组件混入下面的混入方法 5找到下面的getlist方法

工作165:混入调用的时候

直接created里面定义 不需要在其他位置进行过多操作

工作166:错误的处理方式

1这种处理没有数据 2 这样处理勉强调用了接口 但是获取数据还是有问题

07异常处理

1、 【请尝试解释以下奇怪的现象&#xff01;】 int i1, j0, k; ki/j; 代码在运行时会引发异常 上边代码在运行时不会引发异常 浮点数除以0&#xff1a;Infinity 可以使用javap去反汇编两个示例程序的.class文件&#xff08;一个是AboutException.class&#xff0c;另一个是Thr…

工作166:正确eachrt渲染方式

1第一步 2第二步 3第三步

Effective C++: 06继承与面向对象设计

32&#xff1a;确定你的public继承塑模出is-a关系 以C进行面向对象编程&#xff0c;最重要的一个规则是&#xff1a;public继承表示的是"is-a"&#xff08;是一种&#xff09;的关系。 如果令class D以public形式继承class B&#xff0c;你便是告诉编译器说&#xff…

工作168:代码中的删除逻辑处理

1首先找到对应方法里面的删除方法 2点击之后进行删除操作 在当前方法里面直接进行混入删除 删除结束

Android侧滑删除-RecyclerView轻松实现高效的侧滑菜单

1 删除整个RecyclerView hisList.clear(); hisAdapter.notifyDataSetChanged(); mScanListAdapter.setNewData(null); 刚开始只是使用了list.clear() 方法就是没有效果&#xff0c;最后想起来了忘记了notifyDataSetChanged 刷新了 2 RecyclerView 删除Item hisList.remov…

前端学习(2645):懂代码之header表头页之未读消息

<!-- 消息中心 --><div class"btn-bell"><el-tooltipeffect"dark":content"message?有${message}条未读消息:消息中心"placement"bottom"><router-link to"/tabs"><i class"el-icon-bell&…