为什么不用 index 做 key?

“在 Vue 中,我们在使用 v-for 渲染列表的时候,为什么要绑定一个 key?能不能用 indexkey?”

在聊这个问题之前我们还得需要知道 Vue 是如何操作 DOM 结构的。

虚拟DOM

我们知道,Vue 不可以直接操作 DOM 结构,而是通过数据驱动、指令等机制来间接操作 DOM 结构。当我们修改模版中的数据时,Vue 会触发重新渲染过程,调用render函数,它会返回一个 虚拟 DOM 树,它描述了整个组件模版的结构。

什么是虚拟DOM呢?虚拟DOM是一个对象,没想到吧...我们来看看Vue是如何将template模板里面的东西交给浏览器来渲染的

举个栗子🌰:

<template><ul class="list"><li v-for="item in list" :key="item.index" class="item">{{ item }}</li></ul>
</template><script setup>
import { ref } from 'vue';
const list = ref(['html', 'css', 'js'])
</script>

Vue 在渲染这个列表时,就会调用render函数,它会返回一个类似下面这个虚拟 DOM 树。

let VDom = {tagName: 'ul',props: {class: 'list'},chilren: [{tagName: 'li',props: {class: 'item'},chilren: ['html']},{tagName: 'li',props: {class: 'item'},chilren: ['css']},{tagName: 'li',props: {class: 'item'},chilren: ['js']}]
}

虚拟 DOM 的每个节点对应于真实 DOM 树中的一个节点。

当我们修改数据时,Vue 又会触发重新渲染的过程。

const list = ref(['html', 'css', 'vue']) //修改列表第三项'js'->'vue'

Vue 又会生成一个新的虚拟DOM树:

let VDom = {tagName: 'ul',props: {class: 'list'},chilren: [{tagName: 'li',props: {class: 'item'},chilren: ['html']},{tagName: 'li',props: {class: 'item'},chilren: ['css']},{tagName: 'li',props: {class: 'item'},chilren: ['vue']}]
}

注意观察,这里最后一个节点的子节点为'vue',发生了数据变化,Vue内部又会返回一个新的虚拟 DOM。那么 Vue 是如何将这个变化响应给页面的呢?

摆在面前的有两条路

要么重新渲染这个新的虚拟 DOM ,要么只新旧虚拟 DOM 之间改变的地方。

显而易见,只渲染修改了的地方是不是会更节省性能。

巧了,尤雨溪也是这样想的,于是便有了“ Diff 算法 ”。

Diff 算法

Vue 将新生成的新虚拟 DOM 与上一次渲染时生成的旧虚拟 DOM 进行比较,对比出是哪个虚拟节点更改了,找出这个虚拟节点,并只更新这个虚拟节点所对应的真实节点,而不用更新其他数据没发生改变的节点。

我自己总结了一下Diff算法的过程,由于代码过多,就不在此展示了:

  1. 新旧虚拟DOM对比的时候,Diff 算法比较只会在同层级进行,不会跨层级比较。
  2. 首先比较两个节点的类型,如果类型不同,则废弃旧节点并用新节点替代。
  3. 对于相同类型的节点,进一步比较它们的属性。记录属性差异,以便生成相应的补丁。
  4. 如果两个节点相同,继续递归比较它们的子节点,直到遍历完整个树。
  5. 如果节点有唯一标识,可以通过这些标识来快速定位相同标识的节点。
  6. 如果节点的相同,只是顺序变化,不会执行不必要的操作。

面试官:为什么不用 index 做 key?

平常v-for循环渲染的时候,为什么不建议用 index 作为循环项的 key 呢?

举个栗子🌰:

<div id="app"><ul><li v-for="item in list" :key="item.index">{{item}}</li></ul><button @click="add">添加</button>
</div>
<script>const { createApp, ref } = VuecreateApp({setup() {const list = ref(['html', 'css', 'js']);const add=()=> {list.value.unshift('阳阳羊');}return {list,add}}}).mount('#app')
</script>

我们发现添加操作导致的整个列表的重新渲染,按道理来说,Diff 算法会复用后面的三项,因为它们只是位置发生了变化,内容并没有改变。但是我们回过头来发现,我们在前面添加了一项,导致后面三项的 index 变化,从而导致 key 值发生变化。Diff 算法失效了?

那我们可以怎么解决呢?其实我们只要使用一个独一无二的值来当做key就行了

<div id="app"><ul><li v-for="item in list" :key="item.id">{{item.name}}</li></ul><button @click="add">添加</button>
</div>
<script>const { createApp, ref } = VuecreateApp({setup() {const list = ref([{ name: "html", id: 1 }, { name: "css", id: 2 }, { name: "js", id: 3 }, ]);const add=()=> {list.value.unshift({ name: '阳阳羊', id: 4 });}return {list,add}}}).mount('#app')
</script>

这样,key就是永远不变的,更新前后都是一样的,并且又由于节点的内容本来就没变,所以 Diff 算法完美生效,只需将新节点添加到真实 DOM 就行了。

如果后端没有返回 唯一 id ,唯一标识都可以的

最后

看到这里,希望你已经对Diff 算法有了初步的了解,想要深入了解,可以自行查看Diff 源码。总的来说,Diff 算法是一项关键的技术,为构建响应式和高效的用户界面提供了基础。最后,祝你面试顺利,学习进步!

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

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

相关文章

避免重复数据产生

在MySQL表中&#xff0c;可以通过创建唯一索引或唯一约束来确保表中除了ID以外的其他字段不能有两条记录相同的值。 创建唯一索引&#xff1a; CREATE UNIQUE INDEX index_name ON table_name (column1, column2, ...); 其中&#xff0c;index_name是索引的名称&#xff0c;ta…

AI大模型,掀起新一波智能浪潮!

AI大模型的出现&#xff0c;标志着人工智能技术迈入了一个新的阶段。这些巨大的模型不仅在规模上超越了以往任何其他人工智能系统&#xff0c;而且在性能上也取得了巨大的突破。由于其庞大的参数量和复杂的结构&#xff0c;AI大模型在各个领域展现出了强大的学习能力和推理能力…

【机器学习】在Python中进行K-Means聚类和层次聚类

Python中聚类算法API的使用指南 聚类分析是数据分析中一种常见的无监督学习方法&#xff0c;通过将相似的对象分组在一起&#xff0c;我们能够识别出数据集中的自然分群。本文将介绍如何使用Python中的聚类算法接口&#xff0c;KMeans和层次聚类方法。 K-Means 聚类 K-Means…

EdgeX Foundry - 连接 Modbus 设备

文章目录 一、概述1.安装说明2.Modbus Slave 工具 二、连接 Modbus 设备1.docker-comepse2.设备配置文件3.启动 EdgeX Foundry4.访问 UI4.1. consul4.2. EdgeX Console 5.创建 Modbus 设备5.1.创建设备配置文件5.2.添加设备 6.测试6.1.命令6.2.事件6.3.读值 EdgeX Foundry # E…

JavaEE进阶篇 (一) -- Maven

写在前&#xff1a;Hello各位小伙伴们&#xff0c;这一部分主要对JavaEE进阶部分内容进行学习记录&#xff0c;关于前面学习的内容也会同步更新~~ 在学习新内容之前&#xff0c;需要了解一下基础的内容&#xff1a; JavaEE(Java Platform Enterprise Edition),Java平台企业版&…

面试经典150题——环形链表

Suffering, for the weak is the tomb of death, and for the strong is the soil of germinal ambition.​ 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个题目就是判断一个链表有没有环&#xff0c;其实我们之讲过一个题目&#xff0c;就实现了判断链表有没有环的步骤&a…

LeetCode---387周赛

题目列表 3069. 将元素分配到两个数组中 I 3070. 元素和小于等于 k 的子矩阵的数目 3071. 在矩阵上写出字母 Y 所需的最少操作次数 3072. 将元素分配到两个数组中 II 一、将元素分配到两个数组中I 直接按照题目要求进行模拟即可&#xff0c;代码如下 class Solution { p…

探索 ON1 Resize Ai 2023.5 for Mac/win:释放图像的无限可能

ON1 Resize AI 2023.5 for Mac/Win 是一款专业的图像无损放大软件&#xff0c;通过人工智能技术&#xff0c;能够将图像放大至更高的分辨率&#xff0c;同时保持图像细节和清晰度的最佳状态。该软件的强大功能和直观的操作界面&#xff0c;使它成为摄影师、设计师和艺术家的理想…

讲解人工智能在现代科技中的应用和未来发展趋势。

目录 1.人工智能在现代科技中的应用 1.1医疗健康 1.2交通运输 1.3金融服务 1.4教育 1.5制造业 1.6客户服务 2.未来发展趋势 2.1泛化能力提升 2.2跨领域集成学习 2.3增强的可解释性和透明度 2.4AI伦理和法规 2.5量子计算与AI的结合 2.6AI与物联网&#xff08;IoT&…

滴滴一面:Keepalived+Nginx高可用,如何实现IP跳跃?(1)

尼恩说在前面 HashMap的工作原理是目前java面试问的较为常见的问题之一&#xff0c;在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、shein 希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试…

OpenCV学习笔记(四)——对视频的读取操作

目录 读取视频内容 将彩色视频转换为灰色视频 读取视频内容 读取视频文件通常分为读取文件、验证是否打开成功打开文件、逐帧读取视频文件、释放资源和关闭窗口 &#xff08;1&#xff09;读取文件 在OpenCV中&#xff0c;通常使用VedioCapture来读取视频流&#xff0c;Vedi…

图的单源最短路径问题

目录 一、简述 二、前置配置 三、迪杰斯特拉算法 四、改进的迪杰斯特拉算法 五、贝尔曼福特算法 一、简述 图是一种比较常用的数据结构&#xff0c;将问题转换成图相关的思路也是比较常用的。 图的单源最短路径问题&#xff0c;也就是图中某一个节点到图中其他节点的最短路…

基于JAVA+ springboot实现的抗疫物质信息管理系统

基于JAVA springboot实现的抗疫物质信息管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 …

macOS上实现「灵动岛」效果

自从Apple iPhone推出了「灵动岛」功能后&#xff0c;用户们就被其优雅的设计和强大的功能所吸引。然而&#xff0c;作为macOS用户&#xff0c;我们一直在等待这一功能能够在我们的设备上实现。现在&#xff0c;随着新的应用程序的推出&#xff0c;我们终于可以在我们的Mac上体…

JWT的是什么

session共享 什么是session共享 Session共享是指在分布式系统中&#xff0c;在多个服务器之间共享同一个用户的会话数据。在传统的Web应用中&#xff0c;用户的会话信息通常存储在服务器端的Session中&#xff0c;而每个用户的请求在同一个服务器上处理&#xff0c;因此可以轻…

【黑马程序员】Python基础

文章目录 初始PythonPython应用场景什么是编程语言安装Python开发环境第一个Python程序Python解释器 Python基础语法常用数值类型字符串总结 python中的注释变量数据类型数据类型转换标识符运算符算术运算服赋值运算符 字符串扩展字符串的三种定义方式字符串的引号嵌套字符串的…

基于redis实现互斥锁

利用setnx命令实现类似获取锁和释放锁。 获取锁&#xff0c;setnx lock 1&#xff0c;返回值为1视为获取成功&#xff0c;为0视为获取失败 释放锁&#xff0c;del lock 特殊情况&#xff1a; 如果获取锁之后&#xff0c;锁来还来不及释放&#xff0c;redis宕机了&#xff0c;这…

【CSP试题回顾】202009-2-风险人群筛查

CSP-202009-2-风险人群筛查 解题思路 主循环&#xff08;对每个查询&#xff09;&#xff1a; 使用一个布尔变量pass来标记风险人群是否至少一次进入了特定区域&#xff0c;以及一个布尔变量onlyOnce来确保停留计数 stayNum 在每次查询中最多只增加一次。内循环&#xff08;对…

面试官:如何保证缓存和数据库的一致性?

先更新数据库还是先更新缓存? 先说最基本的策略,一定要给缓存设置一个过期时间,避免异常情况下数据库和缓存长时间不一致 为了保证缓存和数据库的实时一致,我们不能用定时任务来更新缓存,我们要同时更新数据库和缓存,对应的方案有如下两种 先更新缓存,再更新数据库先更…

springboot252基于Springboot和vue的餐饮管理系统的设计与实现

餐饮管理系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&…