v-for中的key是什么作用

ops/2024/9/23 4:33:07/

在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。
这个key属性有什么作用呢?我们先来看一下官方的解释:

key属性主要用在Vue的虚拟DOM算法,在新Inodes对比时辨识VNodes;
如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;
而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;

认识VNode

我们先来解释一下VNode的概念:
因为目前我们还没有比较完整的学习组件的概念,所以目前我们先理解HTML元素创建出来的VNode;
VNode的全称是VirtualNode,也就是虚拟节点;
事实上,无论是组件还是元素,它们最终在Vue中表示出来的都是一个个VNode;
VNode的本质是一个JavaScript的对象;
图例:
在这里插入图片描述

那么Vue中对于列表的更新究竟是如何操作的呢?
Vue事实上会对于有key和没有key会调用两个不同的方法;
有key,那么就使用 patchKeyedChildren方法;
没有key,那么久使用 patchUnkeyedChildren方法;

Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作:
在没有key的时候我们的效率是非常低效的;
在进行插入或者重置顺序的时候,保持相同的key可以让diff算法更加的高效;
v-for绑定key属性,key要使用唯一值,尽量避免使用index,index只能保持语法正确,并不能提高性能

<ul><li v-for="item in letters" :key="item">{{item}}</li></ul>

http://www.ppmy.cn/ops/36343.html

相关文章

【一起深度学习-----VGG】

VGG 原理图&#xff1a; 原理图&#xff1a; 为啥要使用VGG块呢&#xff1f; 对于AlexNet网络来说&#xff0c;虽然十分高效了&#xff0c;但是它并没有提供一个通用的模板&#xff0c;方便后续的研究。 故采用了模块化的思想&#xff0c;方便重复使用。 其实对比于AlexNet神经…

cmake进阶:目录属性说明一

一. 简介 接下来简单学习一下 cmake 中的属性相关的概念。 属性大概可以分为多种&#xff1a;全局属性、目录属性&#xff08;源码属性&#xff09;、目标属性以及其它一些分类。 二. cmake进阶&#xff1a;目录属性 cmake中的属性可以 在如下网址查询到&#xff1a; http…

Instal IIS on Windows Server 2022 Datacenter

和以往版本一样&#xff0c;没有什么不同&#xff0c;So easy&#xff01; WinR - ServerManager.exe 打开服务器管理器&#xff0c;点击【添加角色和功能】&#xff0c;选择自己想要的角色和功能。 一、开始之前&#xff1a;帮助说明&#xff0c;点击【下一步】&#xff1b;…

CSS学习笔记之基础教程(一)

1、CSS语法 CSS 规则集&#xff08;rule-set&#xff09;由选择器和声明块组成&#xff1a; 选择器指向您需要设置样式的 HTML 元素。 声明块包含一条或多条用分号分隔的声明。 每条声明都包含一个 CSS 属性名称和一个值&#xff0c;以冒号分隔。 多条 CSS 声明用分号分隔…

linuxwindowns文件共享之samba

samba 我们所了解过的 FTP 文件传输&#xff0c;的确可以让不同主机之间进行文件传输&#xff0c;此方式特点是&#xff0c;传输文件&#xff0c;用户想要在客户端直接修改服务器的数据&#xff0c;还是较为麻烦。 既然如此&#xff0c;linux 上有一款应用叫 Samba&#xff0…

经典面试题---环形链表

1. 环形链表1. - 力扣&#xff08;LeetCode&#xff09; 要解决这道题&#xff0c;我们首先要挖掘出带环的链表与不带环的链表之间的差别。 以此&#xff0c;才能设计出算法来体现这种差别并判断。 二者最突出的不同&#xff0c;就是不带环的链表有尾结点&#xff0c;也就是说…

Compose 状态管理

文章目录 Compose 状态管理概述使用MutableStaterememberStatelessComposable & StatefulComposable状态提升rememberSaveable支持parceable不支持parceable 使用ViewModelViewModelProvider.Factory 使用Flow Compose 状态管理 概述 当应用程序的状态发生变化时&#xf…

sql server

SQL Server 是微软开发的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛用于企业级应用开发和数据管理。它遵循 SQL&#xff08;Structured Query Language&#xff09;标准&#xff0c;提供了数据存储、查询、更新和管理的功能。以下是 SQL Server 的一些…