第八节——Vue渲染列表+key作用

一、列表渲染

vue中使用v-for指令进行列表

<template><div><!-- item 代表 当前循环的每一项 --><!-- index 代表 当前循环的下标--><!-- 注意:必须要加key--><div v-for="(item, index) in arr" :key="index">{{ item }}</div></div>
</template>
<script>
export default {data() {return {arr: [1, 2, 3, 4],};},
};
</script>

二、为什么循环的时候需要加key

1、作用

1.key的作用主要是为了高效的更新虚拟DOM,提高渲染性能。

2.key属性可以避免数据混乱的情况出现。

2、原理

1.vue实现了一套虚拟DOM,使我们可以不直接操作DOM元素只操作数据,就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法

2当页面数据发生变化时,Diff算法只会比较同一层级的节点;

3.如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点后面的子节点;如果节点类型相同,则会重新设置该节点属性,从而实现节点更新

4.使用key给每个节点做一个唯一标识,Diff算法就可以正确识别此节点,"就地更新"找到正确的位置插入新的节点

3、注意

1.key 的值只能是字符串或数字类型

2. key 的值必须具有唯一性(即:key 的值不能重复)

2.建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)

3.使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性,实际项目中如果没有id,推荐使用index)

4.建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

三、为什么index不能当做key

1、用index当做key

<template><div><div v-for="(item, index) in infos" :key="index">{{ item.name }} --- <button @click="del(index)">删除</button></div></div>
</template>
<script>
export default {data() {return {infos: [{name: "张三",age: 18,},{name: "李四",age: 20,},{name: "王五",age: 21,},],};},methods: {del (index) {this.infos.splice(index, 1)}}
};
</script>

这么乍一看,好像可以正常实现功能,但是我们通过浏览器的控制台检查列表的渲染后发现,我们删除了一个项,竟然连带着整个列表都进行了重新渲染!

2、唯一值当做下标

<template><div><div v-for="(item, index) in infos" :key="item.name">{{ item.name }} --- <button @click="del(index)">删除</button></div></div>
</template>
<script>
export default {data() {return {infos: [{name: "张三",age: 18,},{name: "李四",age: 20,},{name: "王五",age: 21,},],};},methods: {del (index) {this.infos.splice(index, 1)}}
};
</script>

3、结论

如果key改变,当前元素会重新渲染,所以循环的时候推荐使用唯一不会改变的值当做key。

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

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

相关文章

UE5 Blueprint发送http请求

一、下载插件HttpBlueprint、Json Blueprint Utilities两个插件是互相依赖的&#xff0c;启用&#xff0c;重启项目 目前两个是Beta的状态&#xff0c;如果你使用的平台支持就可以使用&#xff0c;我们的项目因为需要取Header的值&#xff0c;所有没法使用这两个插件&#xff0…

DBeaver安装与使用教程(超详细安装与使用教程),好用免费的数据库管理工具

DBeaver安装步骤 资源下载&#xff1a; https://download.csdn.net/download/qq_37181642/88479235 官网地址&#xff1a; https://dbeaver.io/ 安装dbeaver 点击上图.exe安装工具&#xff0c;安装完成后不要打开 。 windows配置hosts 在hosts文件中加入&#xff1a; 127.0.0…

基于SSM民宿预订及个性化服务系统-计算机毕设 附源码 04846

SSM民宿预订及个性化服务系统 摘 要 伴随着国内旅游经济的迅猛发展民宿住宿行在国内也迎来了前所未有的发展机遇。传统的旅游模式已难以满足游客日益多元化的需求&#xff0c;随着人们外出度假的时间越来越长&#xff0c;导致人们在住宿的选择上更加追求舒适、个性化的住宿体验…

Kafka - 3.x 副本不完全指北

文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息&#xff0c;注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息&#xff0c;观察副本分布④ 处理分区leader分布不均匀…

Spring Cloud之微服务

目录 微服务 微服务架构 微服务架构与单体架构 特点 框架 总结 SpringCloud 常用组件 与SpringBoot关系 版本 微服务 微服务&#xff1a;从字面上理解即&#xff1a;微小的服务&#xff1b; 微小&#xff1a;微服务体积小&#xff0c;复杂度低&#xff0c;一个微服…

网络协议--TCP:传输控制协议

17.1 引言 本章将介绍TCP为应用层提供的服务&#xff0c;以及TCP首部中的各个字段。随后的几章我们在了解TCP的工作过程中将对这些字段作详细介绍。 对TCP的介绍将由本章开始&#xff0c;并一直包括随后的7章。第18章描述如何建立和终止一个TCP连接&#xff0c;第19和第20章将…

macOS鼠标管理操作增强BetterMouse简体中文

BetterMouse是一款专为Mac用户设计的鼠标增强工具&#xff0c;旨在帮助用户更好地掌握和管理鼠标操作。它提供了全局鼠标手势、高度可定制的鼠标设置选项以及一些有用的鼠标增强功能&#xff0c;如鼠标放大镜、鼠标轨迹和应用程序切换功能。这些功能可以大大提高用户的工作效率…

HarmonyOS鸿蒙原生应用开发设计- 流转图标

HarmonyOS设计文档中&#xff0c;为大家提供了独特的流转图标&#xff0c;开发者可以根据需要直接引用。 开发者直接使用官方提供的流转图标内容&#xff0c;既可以符合HarmonyOS原生应用的开发上架运营规范&#xff0c;又可以防止使用别人的图标侵权意外情况等&#xff0c;减…

基于机器视觉的火车票识别系统 计算机竞赛

文章目录 0 前言1 课题意义课题难点&#xff1a; 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的火车票识别系统 该项目较为新颖&#xff0c;适合作为竞赛…

[蓝桥杯-610]分数

题面 解答 这一题如果不知道数论结论的话&#xff0c;做这个题会有两种天壤之别的体验 此题包含以下两个数论知识 1. 2^02^12^2...2^(n-1)2^n-1 2. 较大的数如果比较小的数的两倍大1或者小1&#xff0c;则两者互质 所以答案就是2^n-1/2^(n-1) 标程1 我的初次解答 #in…

【html】图片多矩形框裁剪

说明 由于项目中需要对一个图片进行多选择框进行裁剪&#xff0c;所以特写当前的示例代码。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><base href"/"><title>图片裁剪</tit…

【点云学习PCL 】一

点云学习 说明&#xff1a;仅做学习使用&#xff0c;侵删 参考网址1 一、点云基础 0 概述 PCL&#xff08;Point Cloud Library&#xff09;是用于 2D/3D 图像和点云处理的大型开源跨平台的 C 编程库&#xff0c;PCL 框架实现了大量点云相关的通用算法和高效的数据结构&…

基于XML的Web服务Java接口(JAX-WS)、Jakarta XML Web Services Eclipse 实现

简介 JAX-WS&#xff08;Java API for XML-Based Web Services&#xff09;&#xff0c;是创建web服务的Java编程接口&#xff0c;特别是SOAP服务。是Java XML编程接口之一&#xff0c;是Java SE 和Java EE 平台的一部分。 JAX-WS 2.0 规范是代替JAX-RPC 1.0的下一代Web服务AP…

YOLOv5 onnx \tensorrt 推理

一、yolov5 pt模型转onnx code: https://github.com/ultralytics/yolov5 python export.py --weights yolov5s.pt --include onnx二、onnx 推理 import os import cv2 import numpy as np import onnxruntime import timeCLASSES [person, bicycle, car, motorcycle, airpl…

stable diffusion简介和原理

Stable Diffusion中文的意思是稳定扩散&#xff0c;本质上是基于AI的图像扩散生成模型。 Stable Diffusion是一个引人注目的深度学习模型&#xff0c;它使用潜在扩散过程来生成图像&#xff0c;允许模型在生成图像时考虑到文本的描述。这个模型的出现引起了广泛的关注和讨论&am…

IP 地址查询,快速查询自己的 IP 地址

文章目录 在线结果 在线 http://myip.top/ 结果

【计算机网络笔记】Cookie技术

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

Redis(04)| 数据结构-压缩列表

压缩列表的最大特点&#xff0c;就是它被设计成一种内存紧凑型的数据结构&#xff0c;占用一块连续的内存空间&#xff0c;不仅可以利用 CPU 缓存&#xff0c;而且会针对不同长度的数据&#xff0c;进行相应编码&#xff0c;这种方法可以有效地节省内存开销。 但是&#xff0c;…

腾讯云 AI 绘画:文生图、图生图、图审图 快速入门

腾讯云 AI 绘画是腾讯云推出的一款基于人工智能的图像生成和编辑产品&#xff0c;能够根据输入的图片或描述文本&#xff0c;智能生成与输入内容相关的图片&#xff0c;支持多样化的图片风格选择。 在本文中&#xff0c;我们将介绍如何使用腾讯云 AI 绘画的三项主要功能&#…

Windows-Oracle19c 安装详解-含Navicate远程连接配置 - 同时连接Oracle11g和Oracle19c

文章目录 0 说明1 下载链接2 安装&#xff1a;一定要以管理员身份运行&#xff0c;不然后面有可能会报错。3 启动监听4. 登录Oracle4 Navicate远程连接-配置监听4.1 修改监听文件4.2 网络配置助手-配置本地监听端口4.3 Navicate连接成功 5 Navicate同时连接两个Oracle数据库 0 …