如何更好的使用VUE v-for循环

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

1.介绍

对于熟悉vue的开发人员v-for必然不陌生了，因为在开发过程中，必须用到它。我们经常用它来遍历数组或对象，将列表展示出来。今天将罗列几种常见的用法及建议说明，让我们更好的使用它。

2.用法说明

2.1 为每个 v-for设置:key键值

• 在循环中使用:key值，这也是官方推荐的方法。

• 在没有设置:key的情况下，当我们动态变更数组时，会有可能出现乱序的情况。在以下代码中，如果去除了:key="student.id"，选中某一个学生，再点击添加学生，就会出现乱序的情况。

• :key将让每个元素拥有唯一键引用，我们在操作数据的时候也会更加的便利。

<template>
  <ul>
    <li v-for="student in students" :key="student.id"><input type="checkbox">{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive} from "vue";

const students = reactive([
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 3, name: '王五'},
])
const addStudent = () => {
  const _id = students.length + 1
  students.unshift({id: _id, name: '学生' + _id})
}
</script>
复制代码

2.2 循环中使用index索引

除了给循环定义:key，我们还可以访问循环中的索引，索引将是从0开始计数的序号。

<template>
  <ul>
    <li v-for="(student, index) in students" :key="student.id"><input type="checkbox">#{{index}}.{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

2.3 使用filter方法进行过滤元素

有的时候我们是需要对数据进行过滤筛选展示的，还是根据上面的示例，进行改动一下，添加了学生分数字段。

我们需要筛选学生的及格分数，那么可以可以通过循环筛选filter进行操作。其实v-if判断分数也是可以达到效果，但是不建议这样处理，因为这样数据也是进行了循环渲染，并不能达到性能的最大化。

<template>
  <ul>
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive, ref} from "vue";

const minScore = ref(60)
const students = reactive([
  {id: 1, name: '张三', score: 59},
  {id: 2, name: '李四', score: 80},
  {id: 3, name: '王五', score: 90},
])
const filterItems = (items) => {
  return items.filter((item) => {
    return item.score >= minScore.value
  })
}
const addStudent = () => {
  const _id = students.length + 1
  const _score = Math.round(Math.random() * 100 + 30)
  students.unshift({id: _id, name: '学生' + _id, score: _score})
}
</script>

复制代码

2.4 不要在v-for中使用v-if

请不要尝试在v-for中使用v-if，如果需要筛选过滤数据，请使用filter方法。实在需要判断v-if是否显示模块内容的话，建议在上一层做v-if判断。

例如上面的例子改下，需要判断只有是老师的时候才显示出内容信息。isTeacher加到了ul中，而非li中。

<template>
  <ul v-if="isTeacher">
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

总结

在本文中，简单的介绍了v-for的用例，可能大家都有用到过或者已经懂得，但希望还是能给大家带来一点小收获，让自己更愉快的编码。