vue3【列表渲染】v-for 详细介绍（vue中的“循环”）
vue 常用语法——列表渲染 v-for
- 文章简介
- v-for 主要内容
-
- item in items
- v-for 变量的作用域
- v-for 与对象
- 在 v-for 里使用范围值
- `` 上的 v-for
- v-for 与 v-if
- 通过 key 管理状态
- 组件上使用 v-for
- summary
- 下期预告
-
- vue3【侦测 过滤】filter 数据变化侦测&信息筛选过滤
文章简介
在本文之前已经有文章简单概要介绍过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
<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>
<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。
可以在 标签上使用 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
<li v-for="item in items" v-if="!item.isComplete">
{{ item.name }}
li>
在外新包装一层 再在其上使用 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>
当你使用 时，key 应该被放置在这个 容器上：
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 todolabel>
<input
v-model="newTodoText"
id="new-todo"
placeholder="请输入一些东西"
/>
<button>Addbutton>
form>
<ul>
<todo-item
v-for="(todo, index) in todos"
:key="todo.id"
:title="todo.title"
@remove="todos.splice(index, 1)"
>todo-item>
ul>
template>
TodoItem.vue中 TS部分
<script setup lang="ts">
defineProps(['title'])
defineEmits(['remove'])
</script>
template
<template>
<li>
{{ title }}
<button @click="$emit('remove')">Removebutton>
li>
template>
运行效果：
来试试添加效果：
来试试删除效果：
summary
以上就是v-for的深入展开，由本人结合资料和分析总结得出，若有不足和错误，请大家及时指出，我会第一时间进行修改！
下期预告
vue3【侦测 过滤】filter 数据变化侦测&信息筛选过滤
从键盘的敲击声中 感受知识的永恒律动