1. 首页
  2. web前端
  3. Vue

Vue key的作用

大家在写vue里面时最常用的一个就是v-for了,如果写的时候不加key的话,能看见的是编辑器会报错,控制台也有给黄色警告。但是看不能见的是这样写会影响它的性能,或者可能就会发生本来应该更新却没有更新的bug。如果不加key 就相当于 你的元素里面没有加id 编号 做增删改查 只会默认按照排序索引进行增删改查 然后 就会导致业务逻辑 跟你的试图操作有出入 你会说 咦我想编辑第二个 为何第一个没了,所以建议大家都要加上key

关于key的设置:一些新人在写的时候会把key给写成固定的‘1、2、3’或者用index。 这样是非常不友好的。

因为Vue 是采用diff算法来对比新旧虚拟节点,从而更新节点,key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度,如果不加key的话,就只能一个个对比了。这时有同学可能就会问了:“我用的是index 它是唯一值啊”。 但是大家有没有想过,如果在数组 [1,2,3] 中添加一个‘4’ 变成 [1、4、2、3] 这个添加并没有在尾部 这样除了第一项的index其他项的index全都打乱了。

所以为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。不仅仅是vue,react也是一样。

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=91

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(1条)

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code