react,vue中的key有什么作用?(key的内部原理)
2024-10-20 20:58:37
1.虚拟DOM中的key的作用:
key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较。
2.比较规则
(1)旧虚拟dom中找到了与新虚拟dom相同的key:
若虚拟dom中内容没变,直接使用之前的真实的dom
若虚拟dom内容变了,则生成新的真实的dom,随后替换掉之前的真实的dom
(2)旧虚拟dom中未找到与新虚拟dom相同的key创建新的真实的dom,随后渲染到页面。
3.用index作为key可能会引发的问题:
(1)若对数据进行逆序添加,逆序删除hi破坏顺序操作,会产生没有必要的真实的dom更新==》界面效果没问题,但效率低。
(2)如果结构中还包含输入类的dom:会产生错误dom更新==》界面有问题
4.开发中如何选择key?
(1)使用唯一标识key。如id,手机号,邮箱号,身份证号,学号等。
最新文章
- SLP的模块结构
- CLR VIA
- BZOJ-3226 校门外的区间 线段数+拆点(类似的思想)
- 什么是Nib文件?(Nib文件是一种特殊类型的资源文件,它用于保存iPhone OS或Mac OS X应用程序的用户接口)
- Android之旅:梦想、学习、坚持、自信、淡定
- [搜索] hdu 4016 Magic Bitwise And Operation
- Java实现Windows平台下Ping的最佳方法
- oracle 数据库(表)的逻辑备份与恢复
- Spring基于注解注入的两种方式
- JSONObject基本内容(三)
- 迭代加深搜索(以Power Calculus POJ--3134 UVa--1374为例)
- Jmeter --- 组件执行顺序与作用域
- js中return ,return true,return false;区别
- django模板系统(下)
- ISCSI target的两种安装方法
- [CTSC2006]歌唱王国
- linux系统下cpu信息的查看
- numpy 小示例
- Hashtable 和 HashMap 以及 ConcurrentHashMap
- 获取网站资源 getResourceAsStream
热门文章
- ESP32 IDF 获取天气信息
- 九、docker swarm主机编排
- 【Azure 环境】Azure 云环境对于OpenSSL 3.x 的严重漏洞(CVE-2022-3602 和 CVE-2022-3786)的处理公告
- php统一的gocheck方法
- 【云原生 · Kubernetes】部署高可用 kube-controller-manager 集群
- i春秋Upload
- Cacheable VS Non-Cacheable
- Aspose.Cells实现excel预览
- Oracle plsql Database links
- JavaScript入门④-万物皆对象:Object