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的两个元素信息

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

{{Foo}}
{{Bar}}

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

template

  {{ item.message }}

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

ts

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

template

  {{ parentMessage }} - {{ index }} - {{ item.message }} 

运行效果

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

  {{ message }}




  {{ message }} {{ index }}

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

template

  
    {{ item.message }} {{ childItem }}
  

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

template

v-for 与对象

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

ts

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

template

  

    {{ value }}
  

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

template

  {{ key }}: {{ value }}

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

template

  {{ index }}. {{ key }}: {{ value }}

运行结果：

在 v-for 里使用范围值

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

{{ n }}

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

🔺 上的 v-for

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

例如：

template

  
    
{{ item.msg }}
    

  

v-for 与 v-if

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

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

template

  {{ item.name }}

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

template

  

    {{ item.name }}
  

🔺通过 key 管理状态

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

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

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

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

  template

当你使用 时，key 应该被放置在这个 容器上：

template

  
{{ todo.name }}

注意

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

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

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

  
...

🔺组件上使用 v-for

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

template

但这不会自动将任何数据传递给组件（因为组件有自己独立的作用域）

为了将迭代后的数据传递到组件中，我们还需要传递 props

template

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

——————————————————————

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

App.vue 中 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 = '' // 新增选项的内容 这里设置为空
}

template部分

    
	 
    Add a todo
    
    Add
  
  

     
    
  

TodoItem.vue中 TS部分

defineProps(['title'])
defineEmits(['remove'])

template

  

    {{ title }}
    Remove
  

运行效果：

来试试添加效果：

来试试删除效果：

summary

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

下期预告

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

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