分析key原理

总结:

key是虚拟dom对象的标识,当数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新虚拟dom与旧虚拟dom的差异比较

比较规则:

①旧虚拟dom中找到了与新虚拟dom相同的key

若虚拟dom中的内容没变,直接使用之前的真实dom

若虚拟dom中内容变了,则生成新的真实dom,随后替换掉页面中之前的真实dom

②旧虚拟dom中未找到与新虚拟dom相同的key

创建新的真实dom,随后渲染到页面

使用index作为key

使用唯一标识作为key

如果不写key,vue会默认使用index作为key

相关推荐
兰亭妙微UI设计公司6 分钟前
兰亭妙微软件界面设计公司的解锁按钮设计10大密码
开发语言·前端·javascript
迪幻30 分钟前
封装自己的 npm 依赖并存储到个人 GitHub
前端·npm·github
u0111026751 小时前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
万少1 小时前
Qoder sonus模型 20分钟,复刻 马斯克 飞天汽车
前端·后端·算法
seconp1 小时前
基于Spring Boot和Vue 3的智慧旅游网站:住宿预订、行程规划与千问接入
vue.js·spring boot·毕业设计·软件工程·课程设计·旅游·毕设
java1234_小锋1 小时前
【技术专题】HTML5 网页技术 - HTML5 列表标签
前端·html·html5
强二小哥帅1 小时前
Kotlin 协程复习笔记
前端
不可能片场1 小时前
工程实践 原子替换改了 ctime 怎么修
前端·electron
暧暧内含光1 小时前
HTTP 文件传输体系全解:从协议标头、OSS 架构到流媒体分片
前端
静默回滚1 小时前
浏览器能显示AVIF,却导不出一张AVIF
前端