--- vue标签中有key和没有的区别 ---

vue key

vue在给标签加上key之后能增加,增加和删除的性能

vue在更新时会尽量使用原来的dom来进行修改

如果没有添加key

vue会创建虚拟的dom结点来和真实的dom节点一一对比看哪里修改了,如果没有节点的增删,那么他的效率其实和使用key是一样的,但是如果有了增删,那就不一样了,比如头插了一个元素,这时虚拟节点是a b c ,而实际dom节点是b c ,vue会尽量使用原来的dom元素,那么会在比较第一个虚拟和实际dom节点时,发现虚拟头dom a 和 实际b的不一样了,那就修改,让后继续玩下修改,结果错位了,然后就发现全不一样,于是就涉及到了整颗dom树的修改,在最后c时发现没有实际的dom树了,就才创建一个新的dom树,这就造成了特别大资源浪费

再有key的情况

vue会先比较虚拟dom树和实际dom树key的不同,对于相同的key就直接使用原来的dom节点,并且会比较树中的元素,对元素进行单独修改,对key不同的就创建新的dom树,这在增删情况下就减少了不少的开销

相关推荐
慧一居士14 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
CoderWeen18 小时前
我写了个能一步步点着看的 Dijkstra 可视化项目(Vue3 + Leaflet + Generator)
前端·javascript·vue.js
无人生还19 小时前
第 1 篇:从 Vue3 到 React 的思维转变
前端·vue.js·react.js
就业发动机19 小时前
我用 Tauri 做了一个约 1.5 MB 的开源屏幕标注工具:MarkerOn
vue.js·rust
爱分享的程序猿-Clark19 小时前
【前端分享】vue开发项目,如何实现 从A页面跳转到B页面,并传值!
前端·javascript·vue.js
徐小夕20 小时前
花了3天,我写了一款开源AI公众号编辑器
前端·vue.js·github
come1123421 小时前
Vue 2 与 Vue 3 语法区别及使用技巧
前端·javascript·vue.js
腻害兔21 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:ERP 企业资源模块,一个轻量级进销存的完整实现?
前端·javascript·vue.js·人工智能·前端框架·产品经理·ai编程
Simon_He21 小时前
AI 对话里的流式 Markdown 为什么难:从不完整 Token 到增量渲染
vue.js
达子6661 天前
第4章_图解HarmonyOS 的结构
vue.js