【vue3】08. 跟着官网学习vue3-列表渲染

每日鸡汤：我们不会比今天更年轻了

目录

前言

一、v-for

1. 使用解构

2. 绑定key属性

二、知识延伸

1. for ..of 和for..in的区别

2. 可迭代对象

总结

---

前言

本篇文章对应官网【列表渲染】，实际就是使用v-for循环。

---

一、v-for

1. 使用解构

在for循环的时候使用解构，我倒是很少用，以后可以用起来

<template>
	<div>
		<div v-for="{ name, id } in data" :key="id">{{ name }}</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const data = ref([
	{
		id: 1,
		name: 'cat',
		age: '1',
	},
	{
		id: 2,
		name: 'dog',
		age: '12',
	},
])
</script>

2. 绑定key属性

一般编辑器都要求在使用v-for的时候给元素绑定key，这是因为在dom更新的时候（虚拟dom进行diff）key起着很大的作用。

官网这部分有提到

key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。

二、知识延伸

1. for ..of和for..in的区别

1. for...in以任意顺序迭代一个对象的除Symbol外的可枚举的属性，包括继承的可枚举属性
2. for ... of可以循环任何可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）

2. 可迭代对象

vue官网说

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

 所以你有必要了解一下什么是迭代器

要成为可迭代对象， 一个对象必须实现 @@iterator 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性

Array、Map是可迭代对象，object不是可迭代对象。

---

总结

v-for的使用，记住，适合对象、数组、数字，需要绑定key。