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 & ...
随机推荐
- 【springcloud】hystrix面试题
1 hystrix是什么? Netflix(国外最大的类似于,爱奇艺,优酷)视频网站,五六年前,也是,感觉自己的系统,整个网站,经常出故障,可用性不太高 有时候一些vip会员不能支付,有时候看视频就卡 ...
- Servlet常见问题
时间:2016-12-6 23:18 java.lang.ClassNotFoundException: org.apache.commons.collections.FastHashMapcommo ...
- 面试必问题：JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
- linux centos7 read 命令
2021-08-24 1. 命令简介 read 命令就是读取控制台输入,会将从键盘输入的数据分割成一个个字段依次存储在 parameter[0] .parameter[1] ......,若是没有指定 ...
- C# Dapper基本三层架构使用 （四、WinForm UI层）
UI层主要功能是显示数据和接受传输用户的数据,可以在为网站的系统运行提供交互式操作界面,表示层的应用方式比较常见,例如Windows窗体和Web页面. 在项目中增加WinForm应用程序,结构如下 添 ...
- Java优化if-else代码
前言 开发系统一些状态,比如订单状态:数据库存储是数字或字母,但是需要显示中文或英文,一般用到if-else代码判断,但这种判断可读性比较差,也会影响后期维护,也比较容易出现bug.比如: 假设状态对 ...
- pyhton锁机制，进程池
第一,进程锁,本来进程是各自的,本不要加锁,但是在屏幕上输出打印时为了防止混乱,在进程模块有一个锁函数,使用如下,需要说明是在py3以上版本没 有出现在过屏幕输出混乱,可以不加,这方法不重要,但是作为 ...
- FastAPI（6）- get 请求 - 详解 Query
可选参数 上一篇文章讲过查询参数可以不是必传的,可以是可选参数 from fastapi import FastAPI from typing import Optional import uvico ...
- java原码反码补码以及位运算
原码, 反码, 补码的基础概念和计算方法. 对于一个数, 计算机要使用一定的编码方式进行存储. 原码, 反码, 补码是机器存储一个具体数字的编码方式. 1. 原码 原码就是符号位加上真值的绝对值, 即 ...
- pip安装更换国内源
镜像地址:阿里云 https://mirrors.aliyun.com/pypi/simple/豆瓣http://pypi.douban.com/simple/清华大学 https://pypi.tu ...