【精】vue中v-for循环为什么要使用key

最新推荐文章于 2023-12-12 10:28:40 发布

李卓书

最新推荐文章于 2023-12-12 10:28:40 发布

阅读量466

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/wangbiao9292/article/details/118356313

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

文章目录

下载源码

https://vuejs.org/js/vue.js
下载完源码后直接script引用，方便调试

官网说明

维护状态：
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

key解释：
key 特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且 key 不再存在的元素将始终被移除/销毁。
有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。

举个例子

没有加key的：

<body>
    <div id="app">
        <button @click="add">click me</button>
        <input type="text" v-for="value in list">
    </div>
</body>

<script>
    
    // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
       el:"#app",
       data:{
           list:[
               {name:"dahuang",id:1},
               {name:"erhuang",id:2},
               {name:"sanhuang",id:3},
               {name:"sihuang",id:4},
           ]
       },
       methods: {
        add(){
              this.list.splice(1,1)
           }
       },
   })

</script>

在这里插入图片描述
这里没有加key，当我们删除第二个元素的时候，发现22没有被删掉，这显然与我们的期望是不符的
当我们加上key之后：

<div id="app">
        <button @click="add">click me</button>
        <input type="text" v-for="(value,item) in list" :key="item">
</div>

请注意，这里我加的key是用的item，也就是数组的下标，我发现结果和没加key的是一样的
当我们加上非下标的key时：

<div id="app">
        <button @click="add">click me</button>
        <input type="text" v-for="(value,item) in list" :key="value.id">
</div>

在这里插入图片描述这样就没有问题了。
那么为什么会产生这种原因呢？

探索本源

看看vue中比较的源码

function sameVnode (a, b) {
    return (
      a.key === b.key &&
      a.asyncFactory === b.asyncFactory && (
        (
          a.tag === b.tag &&
          a.isComment === b.isComment &&
          isDef(a.data) === isDef(b.data) &&
          sameInputType(a, b)
        ) || (
          isTrue(a.isAsyncPlaceholder) &&
          isUndef(b.asyncFactory.error)
        )
      )
    )
  }

从代码中可以看出来，如果有key，则可以直接根据唯一标识去识别，更快的返回结果，这是性能提升的关键。这里就针对是否有key产生不同的对比结果。我们知道，vue是根据虚拟dom树去对比前后的vnode是否改变的，在没有key的情况下，我们上面的实例是这样的过程：

1 删除了第二个节点
2 由于没有key，在数据改变后的虚拟节点对比过程中，会把节点依次上调，从而第二个节点的状态会被保留
3 删除最后一个节点

在往后就不想写了。。。

李卓书

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【精】vue中v-for循环为什么要使用key

文章目录下载源码官网说明举个例子探索本源下载源码https://vuejs.org/js/vue.js下载完源码后直接script引用，方便调试官网说明维护状态：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
复制链接

扫一扫