分析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

相关推荐
Kagol3 分钟前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉5 分钟前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau6 分钟前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生8 分钟前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼16 分钟前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君8799719 分钟前
Flutter 如何给图片添加多行文字水印
前端·flutter
进击的尘埃23 分钟前
AI 代码审查工具链搭建:用 AST 解析 + LLM 实现自动化 Code Review 的前端工程方案
javascript
juejin_cn31 分钟前
[转][译] 从零开始构建 OpenClaw — 第五部分(对话压缩)
javascript
leolee181 小时前
Redux Toolkit 实战使用指南
前端·react.js·redux
bluceli1 小时前
React Hooks最佳实践:写出优雅高效的组件代码
前端·react.js