v-for为什么要用key

最新推荐文章于 2024-03-27 20:09:56 发布

森媛

最新推荐文章于 2024-03-27 20:09:56 发布

阅读量467

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_62351590/article/details/122973523

版权

本文探讨了在Vue.js中使用v-for指令时为何需要设置key，解析了key的作用，包括优化diff算法、避免就地复用策略带来的问题。通过实例展示了设置key与不设置key的区别，并分析了在何时设置key可以提高性能。

摘要由CSDN通过智能技术生成

一、Key是什么

开始之前，我们先还原两个实际工作场景
当我们在使用v-for时，需要给单元加上key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Comp :key="+new Date()" />

那么这背后的逻辑是什么，key的作用又是什么？

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

场景背后的逻辑

场景1: 当我们在使用v-for时，需要给单元加上key

如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

场景2: 用+new Date()生成的时间戳作为key，手动强制触发重新渲染

当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

二、设置key与不设置key区别

举个例子：

创建一个实例，2秒后往items数组插入数据

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{
   {
   item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例
    const app &

最低0.47元/天解锁文章

森媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for为什么要用key

一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯一id，
复制链接

扫一扫