vue中key的作用

最新推荐文章于 2023-08-07 22:30:05 发布

前端小灰机

最新推荐文章于 2023-08-07 22:30:05 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_59474517/article/details/125796486

版权

vue中key可以没有，没有代码也可以运行，但是建议加上key。

vue中key运用的地方：

配合v-for使用
   key是vue中虚拟dom标记的唯一id，通过这个可以，diff算法能更加准确和快捷

diff算法：diff算法可以概括为旧值oldCh和新值newCh分别有一个头变量startInx和尾endInx，当新值和旧值两个变量相互比较的时候，一共有四种比较方式（首、尾、旧尾新头、旧头新尾），如果四种都没有比较成功，此时如果设置了key，就会使用key进行比较。在比较的过程中，变量会往中间靠，一旦首变量（startInx）大于尾变量（endInx）就表明旧值（oldCh）和新值（newCh）至少有一个已经遍历完毕，此时结束比较。

准确：不使用key的情况下，因为vue的就地更新策会选择复用节点，导致之前的状态被保存下来，可能会产 
      生一系列的bug。

快速：key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）