vue3【列表渲染】v-for 详细介绍（vue中的“循环”）

文章简介

在本文之前已经有文章简单概要介绍过vue中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。
二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“循环”。 下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏

v-for 主要内容

🔺item in items

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名。

【解释一下：item in items可以理解为item是items中的一个迭代项，可以是标题元素，可以是各种类型的数据集合…等等，你都可以从把这些在也页面中反复出现的内容形式通过循环，也就是v-for和item in items语法简单的表现出来，实现 动态绑定 的一个效果】

举例说明
ts

const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) // 定义 items为一个响应式数组 存放message的两个元素信息

此时，你可以思考一下，如果想把这两个数据显示在页面里，是不是需要输入两次。而且是需要手动读取数据的，这样显然很不智能。如下：

<li>{{Foo}}</li>
<li>{{Bar}}</li>

元素个数越多，你所需要编写的行数就越多，此时就需要循环的帮助，只需要v-for加上一行模板语法，就能轻松实现效果。
template

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

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

ts

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

template

<!-- index是item所在数组items中的下标-->
<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }} 
</li>

运行效果

v-for 变量的作用域

v-for的变量作用域和下面的 JavaScript 代码很类似：

js

const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // 可以访问外层的 `parentMessage`
  // 而 `item` 和 `index` 只在这个作用域可用
  console.log(parentMessage, item.message, index)
})

注意 v-for 是如何对应 forEach 回调的函数签名的。
实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

template

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：
template

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
template

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

v-for 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
ts

const myObject = reactive({
  title: 'title',
  author: 'GunGunxs',
  publishedDate: '20221015'
})

template

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

可以通过提供第二个参数表示属性名 (例如 key)：
template

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

第三个参数表示位置索引：
template

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

运行结果：

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

注意 此处 n 的初值是从 1 开始而非 0。

🔺<template> 上的 v-for

可以在 标签上使用 v-for 来渲染一个包含多个元素的块。
例如：
template

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for 与 v-if

注意 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
template

<!--
 这会抛出一个错误，因为属性item此时
 没有在该实例上定义
-->
<li v-for="item in items" v-if="!item.isComplete">
  {{ item.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：
template

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

🔺通过 key 管理状态

vue 默认按照 “就地更新” 的策略来更新通过 v-for 渲染的元素列表。

• 当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (表单输入值) 的情况。

• 为了给 vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute
  template

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

当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：
template

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

注意

• key 在这里是一个通过 v-bind 绑定的特殊 attribute。
• 不要和在 v-for 中使用对象里所提到的对象属性名相混淆。

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

🔺组件上使用 v-for

直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)
template

<MyComponent v-for="item in items" :key="item.id" />

但这不会自动将任何数据传递给组件（因为组件有自己独立的作用域）
为了将迭代后的数据传递到组件中，我们还需要传递 props
template

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

👆不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。

------------------------------------------------------------------
🔺👇这是一个简单的 Todo List 的例子，展示了如何通过 v-for 来渲染一个组件列表，并向每个实例中传入不同的数据。
App.vue 中 TS部分

<script setup lang="ts">
import { ref } from 'vue'
import TodoItem from './TodoItem.vue' // 从外部引入
  
const newTodoText = ref('')

// 这里的todos当然是可以从外部引入的
// 在项目中多采用模块化 专门的东西放在专门的文件中
const todos = ref([
  {
    id: 1,
    title: '吃饭'
  },
  {
    id: 2,
    title: '睡觉'
  },
  {
    id: 3,
    title: '学习'
  }
])

let nextTodoId = 4 // 新增元素的id初始值为4

// 点击事件触发的添加事件
function addNewTodo() { // 这里的函数也可以使用箭头函数
  todos.value.push({
    id: nextTodoId++, // id自增排在之前元素的下面
    title: newTodoText.value // title
  })
  newTodoText.value = '' // 新增选项的内容 这里设置为空
}
</script>

template部分

<template>
    <!-- 绑定点击事件 点击添加事件-->
	<form v-on:submit.prevent="addNewTodo"> 
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="请输入一些东西"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id" 
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item> 
    <!-- 绑定todos中元素以及对应的下标
     绑定他们各自的key值为其id属性 
     绑定他们各自的title属性
     绑定点击事件 点击按钮触发删除事件 -->
  </ul>
</template>

TodoItem.vue中 TS部分

<script setup lang="ts">
defineProps(['title'])
defineEmits(['remove'])
</script>

template

<template>
  <li>
    {{ title }}
    <button @click="$emit('remove')">Remove</button>
  </li>
</template>

运行效果：

来试试添加效果：

来试试删除效果：

summary

以上就是v-for的深入展开，由本人结合资料和分析总结得出，若有不足和错误，请大家及时指出，我会第一时间进行修改！

下期预告

vue3【侦测 过滤】filter 数据变化侦测&信息筛选过滤

从键盘的敲击声中 感受知识的永恒律动