Vue3 入门指北（六）列表渲染

前言

当我们有一个基于数组的列表数据，想让他在模板中进行渲染时，vue 提供了一个v-for指令，来让我们进行遍历操作，你可以把他理解为JavaScript中的 for 循环。指令的值 为item in items的形式，其中items是数据源，而item则是迭代的对象。

当然我们也可以写成item of items的形式，着也更解决 迭代器的语法，这也是 vue 官方更推荐的。

<div v-for="item of items"></div>

v-for 与 v-if

当然，有可能某些场景下，我们需要v-for和v-if一起连用。但这 vue 官方并不推荐，并且二者的优先级不同，v-if的优先级更高，也就意味着v-if指令内无法访问到v-for中定义的迭代项。

<template v-for="item in items">  <li v-if="!item">    {{ item }}  </li></template>

这个时候我们就可以通过template标签上v-for来解决这个问题。

v-for 中的 key

当我们通过v-for指令迭代数据的时候，我们可以给每个标签上添加一个key属性。这么做的好处是，当数据源发生更新的时候，vue 可以通过key更好的跟踪每个节点，从而更好的重排页面的元素，当然，key 值必须是唯一的。

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

数组的方法

当你定义了一个响应式的数组的时候，你可能会对数组进行相应的操作，而对于一些数组的方法，vue 做了监听处理。

当如下方法被调用时，会对调用它们的原数组进行变更：

• push()
  

• pop()
  

• shift()
  

• unshift()
  

• splice()
  

• sort()
  

• reverse()
  

而相应的，也有一些不会变更原数组内容的方法，他们会返回一个新的数组。例如：filter()，concat() 和 slice()，这些方法在某些场景下尤为好用。