v-for为什么最好(一定)要加key
v-for 指令基于一个数组来渲染一个列表，如下
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9
10 <body>
11 <div id="app">
12
13 <div>
14 <input type="text" v-model="name">
15 <button @click="addNewUser">添加</button>
16 </div>
17
18 <ul>
19 <li v-for="(user, index) in userlist">
20 <input type="checkbox" />
21 姓名：{{user.name}}
22 </li>
23 </ul>
24 </div>
25
26 <script src="./lib/vue-2.6.12.js"></script>
27 <script>
28 const vm = new Vue({
29 el: '#app',
30 data: {
31 // 用户列表
32 userlist: [
33 { id: 1, name: 'zs' },
34 { id: 2, name: 'ls' }
35 ],
36 // 输入的用户名
37 name: '',
38 // 下一个可用的 id 值
39 nextId: 3
40 },
41 methods: {
42 // 点击了添加按钮
43 addNewUser() {
44 this.userlist.unshift({ id: this.nextId, name: this.name })
45 this.name = ''
46 this.nextId++
47 }
48 },
49 })
50 </script>
51 </body>
52
53 </html>
可以通过v-for将data中的 userlist 循环渲染到 li 中，注意第 19 行，没有使用key
可以看到，不添加key的情况下，勾选一个值后再向其中添加一个值，会造成勾选值的改变，从开始勾选的"ls"变为"zs"
在向v-for中添加key值id后
<li v-for="(user, index) in userlist" :key="user.id">
在使用key后，可以看到勾选值不会再因为新添加值而产生改变
在Vue官方文档中，对于key值的介绍是
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
可以这样理解：vue是通过这个 key 值，使其分辨所有节点的身份，根据key值(id)跟踪找到精确的元素重新排序。
举个例子就是说：老师(Vue)在找一个学生的时候是通过具有唯一性的 学号(key) 来找到具体的学生，一个学号对应一个学生，不会出现上面勾选值错误的情况
在官方api中对key的解释是：
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
key值在2.4.2版本之前，只能是 字符串或者数字 类型。由于key的唯一性，尽量把id作为key值。index索引的话因为并不具有唯一性，不能作为key值
v-for为什么最好(一定)要加key的更多相关文章
- iview table里面 插入下拉列表组件（自定义组件）一定要加key，不加key，table开始会加载所有数据，然后再从第2页点回第一页，就会走onChange事件，混乱的逻辑，切记加：key
iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...
- v-for为什么要加key，能用index作为key么
前言 在vue中使用v-for时,一直有几个疑问: v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目. virtual dom 要 ...
- 详解 Diff 算法以及循环要加 key 值问题
上一篇文章我简述了什么是 Virtual DOM,这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值. 什么是 DOM Diff 算法 Web 界面其实就是 ...
- ssh-agent自启动加key脚本
公司使用到阿里云. 需要使用 ssh-agent forward 来跳转.为了方便自己就写了这个脚本 1 #!/bin/sh 2 # auto start ssh-agent and add key ...
- elementui raido 单选框 循环渲染加:key
<el-radio-group v-model="adminRole"> <el-radio v-for="item in adminRoles&quo ...
- Xxtea加解密
转自:http://www.cnblogs.com/luminji/p/3406407.html 很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码, ...
- C#和Javascript间互转的Xxtea加解密
很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码,不妨分享出来.此代码满足: 1:Xxtea支持中文: 2:支持 JS 和 C# 加解密之间的互转: ...
- 一起写一个Android图片加载框架
本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...
- android 图片加载优化，避免oom问题产生
1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...
随机推荐
- 初识cookie
package day01.cookies; import java.io.IOException; import java.net.URLDecoder; import java.net.URLEn ...
- 使用dom4j工具：获得文本内容（四）
package dom4j_read; import java.io.File; import org.dom4j.Document; import org.dom4j.Element; import ...
- 单例模式-案例Runtime
package d.create_type_single; import java.io.IOException; /** * Runtime类就是使用的单例:并且是饿汉式 * (原因考虑是因为:多线 ...
- springboot邮通知553错误和
com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal authorized user ; nested excepti ...
- eval（）函数的使用
1.eval() 函数作用:可以接受一个字符串str作为参数,并把这个参数作为脚本代码来 执行. 2.参数情况:(1)如果参数是一个表达式,eval() 函数将执行表达式: (2) 如果参数是Java ...
- Error establishing a database connection！
后来发现在 wp-config.php 有个 debug 的参数,打开这个参数,修改为: define('WP_DEBUG','true'); 修改这个后,非常不错,报了很多错,一堆.... 使用 ...
- Mybatis源码解析3——核心类SqlSessionFactory，看完我悟了
这是昨晚的武汉,晚上九点钟拍的,疫情又一次来袭,曾经熙熙攘攘的夜市也变得冷冷清清,但比前几周要好很多了.希望大家都能保护好自己,保护好身边的人,生活不可能像你想象的那么好,但也不会像你想象的那么糟. ...
- NOIP模拟26「神炎皇·降雷皇·幻魔皇」
T1:神炎皇 又是数学题,气死,根本不会. 首先考虑式子\(a+b=ab\),我们取\(a\)与\(b\)的\(gcd\):\(d\),那么式子就可以改写成: \[(a'+b')*d=a'b' ...
- Spring AOP Aspect的简单实现(基于注解)
第1步:声明使用注解 <!-- 配置扫描注解--> 扫描包的位置<context:component-scan base-package="com.zz"/> ...
- Vue获取Abp VNext Token
Abp VNext默认没公开访问Token的Api,但有个问题Cookie方式如果是手机或桌面程序不如Token方便 Axios默认是Json方式提交,abp登录需要使用application/x-w ...