从Vue的DOM构建机制中理解key

最新推荐文章于 2025-04-10 03:30:00 发布

YeeJone

最新推荐文章于 2025-04-10 03:30:00 发布

阅读量2k

点赞数 2

分类专栏： vue 文章标签： vue key v-for 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/yeejone/article/details/79265728

版权

本文探讨了Vue中key的作用，通过一个示例演示了key如何影响虚拟DOM的diff算法，强调了key在提高更新速度和实现过渡效果中的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学vue，看完vue的基础部分后大部分的知识都很容易理解，唯独频频提到的key让我疑惑了很久~

官方文档上对key的第一次描述是：

如果只是单纯的看文档，理解的可能不是太清楚，所以我专门写了上面这个demo来验证文档所说的：

先看效果：

普通的for循环（没加key）

加了key值得for循环

可以发现在普通的v-for循环中，在我点击删除后，第一个被选中的input并没有一并删掉，而是简单的将数据项进项了移动，也就是说它的DOM元素并没有删掉。回头看官网文档描述的v-for的“就地复用 ”——

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。