关于v-for的一点小总结

6,279 阅读1分钟

简单介绍

在vue里面,我们通过v-for指令来渲染一个数组列表,列表项需要我们定义一个别名,即:

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

在上面这个例子中,items是我们要渲染的数组列表,item是数组列表项的别名,当然,我们可以给v-for添加第二个参数作为当前项的索引:

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

有经验的同学可能会指出,上面的例子都少了一个属性: key,是的,官方文档建议我们给v-for渲染的每一个列表项指定一个key,那么,key的作用是什么呢?vue官方文档给了以下的解释:

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

提出问题

问题1: 什么是'就地复用'?

这里我举一个简单的例子来说明一下:

在一个玩具组装车间,小A, 小B, 小C,小D以及其他96个流水线工人一起完成组装玩具的工作,每个人都有自己的一辆玩具在组装,突然,小B肚子痛跑去上厕所了,但是小B的工作还没完成,为了不影响整体进度,工人都依次往前补,小C顶替了小B的工作,小D顶替了小C的工作,以此类推,这样虽然也是有点麻烦,还好工作按期完成了。

这就是就地复用大概的思路,如果不采用就地复用,那么,当小B缺席之后,流水线上的工人(包括小B之前的)都要重新排序,100个人按照工号重新排序,重新获取自己的工作内容,这样子工作效率就大大降低了。

在DOM中,就地复用的是那些没有变化的元素,例如:

<div v-for="item in items">
  <input/>
  {{item.message}}
</div>

在这段代码中,没有变化的元素就是input,当我们删除items的某个元素时,item.message会发生变化,因此渲染的数据发生了变化,但是已经存在dom中的input却会被就地复用,具体的演示效果如下:

问题2: 如何解决就地复用产生的问题?

正如我们上面看到的那样,我们希望input也被重新渲染,这个问题的解决方案vue已经在文档中说的很清楚了,我们需要给每一个列表项加上一个唯一的key属性

问题3: key属性是如何解决问题的,它的原理是什么?

这个问题就涉及到了虚拟DOM的diff算法了,具体原理可以查看知乎的一篇文章

问题4: 没有添加key属性或者key属性不是唯一的会出现什么坑?

key属性需要绑定一个唯一的值,但是在我们的实际项目中,不一定会有这么一个唯一的值让我们绑定,因此习惯性我们会采用index作为key属性的值,这样做就容易产生问题了...

因为index对应的value值是会变化的,例如:

list: [
  {index: 0, value: 0},
  {index: 1, value: 1},
  {index: 2, value: 2}
]

当我们执行list.splice(1, 1)移除index = 1的项时,list数组就会变成:

list: [
  {index: 0, value: 0},
  {index: 1, value: 2}
]

因为index是数组元素的索引,当某个元素被移除时,被移除元素后面的元素索引都会更新,也就是说index并不是唯一的,所以vue就会采用 就地复用 原则,这时如果页面上有类似于input这种跟value值没有绑定关系的元素时,这些元素将会被复用,有可能就得不到我们要的效果了

总结: 相信用vue的人都会遇到这么一个列表渲染元素混乱的问题,key属性看似简单但是第一次遇到的时候是会很纳闷的,关于列表渲染比较常见的坑还有数组和对象的监测和更新,this.$set你值得拥有,详情可以查看官方文档,本文如果有错漏,欢迎指出~