每日鸡汤:我们不会比今天更年轻了
目录
前言
本篇文章对应官网【列表渲染】,实际就是使用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的区别
- for...in以任意顺序迭代一个对象的除Symbol外的可枚举的属性,包括继承的可枚举属性
- for ... of可以循环任何可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)
2. 可迭代对象
vue官网说
你也可以使用
of
作为分隔符来替代in
,这更接近 JavaScript 的迭代器语法:
所以你有必要了解一下什么是迭代器
要成为可迭代对象, 一个对象必须实现 @@iterator
方法。这意味着对象(或者它原型链上的某个对象)必须有一个键为 @@iterator
的属性,可通过常量 Symbol.iterator 访问该属性
Array、Map是可迭代对象,object不是可迭代对象。
总结
v-for的使用,记住,适合对象、数组、数字,需要绑定key。