Vue中v-for中的key

仰.

已于 2022-02-16 16:22:29 修改

阅读量1.2k

点赞数 2

分类专栏： Vue2.x 文章标签： vue.js javascript 前端

于 2022-02-16 16:07:26 首次发布

本文链接：https://blog.csdn.net/QWERTYQ16/article/details/122965626

版权

Vue2.x 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、作用与原因

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 = new Vue({
      el: '#demo',
      data: { items: ['a', 'b', 'c', 'd', 'e'] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, 'f')  // 
       }, 2000);
     },
   });
  </script>
</body>

仰.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-for中的key

一、作用与原因key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点二、场景背后的逻辑场景1: 当我们在使用v-for时，需要给单元加上key如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被
复制链接

扫一扫