面试题:react、vue中的key有什么作用?(key的内部原理)

embedded/2024/9/23 18:12:42/

1.虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

2.对比规则:

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

  1. 若虚拟DOM中内容没变,直接使用之前的真实DOM!
  2. 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key,则创建新的真实DOM,随后渲染到到页面。

3.用index作为key可能会引发的问题:

  1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==>界面效果没问题,但效率低。
  2. 如果结构中还包含输入类的DOM:会产生错误DOM更新 ==》界面有问题。

4.开发中如何选择key?:

  1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
  2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。

http://www.ppmy.cn/embedded/115716.html

相关文章

vos3000外呼系统如何手动/自动生成报表

在 VOS3000 外呼系统中,生成报表的方式通常包括手动和自动两种方法: 手动生成报表 登录系统:使用管理员账号登录 VOS3000 系统。查找报表功能:在系统主界面中,选择"数据报表 > 报表管理"选项。选择报表…

老照片修复软件有哪些?6个工具轻松搞定

在回忆的长廊中,老照片承载着岁月的痕迹和珍贵的记忆。 然而,时间的流逝往往让这些宝贵的瞬间变得模糊不清。幸运的是,现代科技赋予了我们修复这些老照片的能力。 面对市场上众多的老照片自动修复软件,选择一个合适的工具变得尤…

信息技术的快速发展与未来展望

信息技术的快速发展与未来展望 近年来,信息技术(IT)的迅猛发展给全球经济、社会和个人生活带来了深刻的变革。无论是大数据、云计算,还是人工智能、物联网等技术,IT技术的进步正不断推动着各行各业的数字化转型。本文…

电线覆盖物检测数据集 气球风筝鸟巢 1300张 voc yol

电线覆盖物检测数据集 气球风筝鸟巢 1300张 voc yol 电线覆盖物检测数据集 数据集描述 该数据集是一个专门用于检测电线及其周围环境中的异物的数据集,旨在帮助研究人员和开发者训练和评估基于深度学习的目标检测模型。数据集涵盖了五种常见的电线覆盖物类型&…

Oracle SQL injection(SQL注入)

Oracle SQL注入是一种网络安全漏洞,它允许攻击者在Oracle数据库驱动的Web应用程序中插入或“注入”恶意的SQL代码。这种攻击通常发生在应用程序未能正确验证或清理用户输入的数据时,从而允许攻击者操纵数据库查询,进而获取、修改或删除敏感信…

深度学习:(六)激活函数的选择与介绍

激活函数 之前使用的 a σ ( z ) a\sigma(z) aσ(z) ,其中 σ ( ) \sigma(~) σ( ) 便是激活函数。 在神经网络中,不同层的激活函数可以不同。 在学习中,一般以 g ( z ) g(z) g(z) 来表示激活函数。 为什么需要(线性)激活函数&#xff…

C#基础(13)结构体

前言 随着函数的讲解完成,我想你已经初步有了写一些复杂逻辑功能的能力,但是我们会发现其实在我们大部分实际开发情况中,很多我们需要写的变量可能不只有一个属性。 他可能有很多变量,那这时候我们如果要把这些变量集中到一个东…

【machine learning-12-多元线性回归】

线性回归-多特征 多特征线性回归多特征表示更简单的多元线性回归表示方法 之前节的线性回归为简化都是用的单特征,但现实中我们的预测因素很复杂不可能只有一个特征,下面总结多特征线性回归 多特征 之前总是用房价举例,预测房价和房屋面积的…