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 & ...
随机推荐
- 深入浅出Mybatis系列（四）---配置详解之properties与environments
我先简单的给大家示例一下properties的使用方法. <configuration> <!-- 方法一: 从外部指定properties配置文件, 除了使用resource属性指 ...
- Java环境变量（Env）和系统属性（Property）详解
环境变量Env 使用System.getenv()获取系统的所有环境变量的Map,注意它是一个UnmodifiableCollection,是一个只读视图 环境变量并不提供set方法,即没有Syste ...
- unity优化 — UGUI纹理格式的选择
首次界面打开加载的资源(如 贴图)会被缓存在内存中,再次打开界面由于内存中已有了资源 所以会更快.如何让首次打开界面会更快呢? 图片是否进行了有效的压缩.Android 平台下不带透明通道 优先使用E ...
- 学习小计: Kaggle Learn Time Series Modeling
ARIMA模型,参数含义参考:https://www.cnblogs.com/bradleon/p/6827109.html from statsmodels.tsa.arima_model impo ...
- WIN7下安装Python3.7和labelImg-1.7.0
安装python3.7 官方https://www.python.org/downloads/windows/,下载windows 64bit python3.7版本 用Administrator权限 ...
- .Net中异步任务的取消和监控
相关类型: CancellationTokenSource 主要用来创建或取消令牌 CancellationToken 监听令牌状态,注册令牌取消事件 OperationCanceledExcepti ...
- mybaits源码分析--自定义插件（七）
一.MyBatis插件 插件是一种常见的扩展方式,大多数开源框架也都支持用户通过添加自定义插件的方式来扩展或者改变原有的功能,MyBatis中也提供的有插件,虽然叫插件,但是实际上是通过拦截器(Int ...
- C++之常指针，指针常量，函数指针，const用法总结
1.const char *p,char const *p,char * const p 对于C++而言,没有const * 修饰符,所以,const只可以修饰类型或者变量名.因而const char ...
- Redis实现主从复制以及sentinel的配置
redis 是一个高性能的 key-value 数据库. redis 的出现,很大程度补偿了 memcached 这类 keyvalue 存储的不足,在部分场合可以对关系数据库起到很 好的补充作用.它 ...
- nginx简介,使用
nginx是什么 nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件. 支持高并发,能支持几万并发连接 资源消耗少,在3万并发连接下开启10个nginx线程消耗的内存不到200M 可 ...