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 & ...
随机推荐
- Springboot使用MatrixVariable 注解
根据 URI 规范 RFC 3986 中 URL 的定义,路径片段中可以可以包含键值对.规范中没对对应的术语.一般 "URL 路径参数" 可以被应用,尽管更加独特的 &qu ...
- java 循环移位输出全排列
//题目:利用1.2.2.3.4这4个数字,用java写一个main函数打印出所有不同的排列,如12234,,2234等,要求打印出来不能有重复 1 package test123; 2 3 impo ...
- shell 字符串判空
2021-09-01 1. 字符串判空主要用到两个参数 -z 判断字符串为空否 -n 判断字符串不为空 2. 实例 #!/bin/bash PID=`date` if [ -z "$PID& ...
- Python命名空间——locals()函数和globals()函数及局部赋值规则
Python使用叫做命名空间的东西来记录变量的轨迹.命名空间只是一个 字典,它的键字就是变量名,字典的值就是那些变量的值.实际上,命名空间可以象Python的字典一样进行访问,一会我们就会看到. 在一 ...
- Windows下Rancher复制Pod内文件到本地
Rancher 未提供直接获取 Pod 内文件的工具(如果有请评论告知下,蟹蟹),但提供了 Rancher 的 CLI 客户端,通过 CLI 可以调用 k8s 的 CLI (kubectl) 命令来操 ...
- noip模拟46
A. 数数 排好序从两头贪心即可 B. 数树 首先很容易想到容斥 如果选择的边集的相关点集有点的度数大于 \(1\) 是不合法的 也就是说一定形成若干条长度不一的链 要给这些链上的点安排排列中的数,方 ...
- SpringBoot-初见
目录 简单介绍 什么是SpingBoot? 微服务 单体应用架构 微服务架构 怎么构建微服务 第一个SpringBoot程序 官方网站快速构建 IDEA 代码 自动装配(要点) pom.xml 启动器 ...
- mysql触发器实时检测一条语句进行备份删除
问题描述:用户有一个这样一个需求,在一张表里会不时出现 "违规" 字样的字段,需要在出现这个字段的时候,把整行的数据删掉.这是个采集任务,如果发现有"违规"字样 ...
- HTML+CSS设计个人主页
在个人主页的设计中,我采用了圣代布局和div分块.效果图如下: <!DOCTYPE html> <html lang="en"> <head> ...
- Java Web下MySQL数据库的增删改查(二)
前文:https://www.cnblogs.com/Arisf/p/14095002.html 在之前图书管理系统上做了改进优化 图书管理系统v2 首先是项目结构: 1.数据库的连接: 1 pack ...