6、Vue 3 （2024 版）基础笔记 - 列表渲染

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

准备工作

1、创建组件

src/components/ListDemo.vue

<template></template>

<script setup lang="ts"></script>

2、引入组件

<template>
	...

    <list-demo></list-demo>
</template>

<script setup lang="ts">
    import ListDemo from "@/components/ListDemo.vue";

    ...
</script>

v-for 遍历数组对象

基础使用

src/components/ListDemo.vue

<template>
    <div v-for="article in articles">
        <p>ID:{{ article.id }}</p>
        <p>标题:{{ article.title }}</p>
        <p>图片:<img :src="article.cover"></p>
    </div>
</template>

<script setup lang="ts">
    const articles = [
        {id:1, title:"PHP","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
        {id:2, title:"Laravel","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
        {id:3, title:"Vue 3","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
    ];
</script>

位置索引

src/components/ListDemo.vue

<template>
    <div v-for="(article, index) in articles">
        <p>ID:{{ article.id }} --- {{ index }}</p>
        <p>标题:{{ article.title }}</p>
        <p>图片:<img :src="article.cover"></p>
    </div>
</template>

<script setup lang="ts">
    const articles = [
        {id:1, title:"PHP","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
        {id:2, title:"Laravel","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
        {id:3, title:"Vue 3","cover":"https://pics4.baidu.com/feed/7af40ad162d9f2d30f0b4da96fb5261e6227ccc1.jpeg"},
    ];
</script>

注意：位置索引 index 的值是从 0 开始的。

v-for 遍历对象

src/components/ListDemo.vue

<template>
    <ul>
        <li v-for="(value, key, index) in meili">{{ value }} -- {{ key }} -- {{ index}}</li>
    </ul>
</template>

<script setup lang="ts">
    const meili = {
        name:"王美丽",
        age:19,
        gender:"女"
    }
</script>

浏览器输出的结果：

• 王美丽 -- name -- 0
• 19 -- age -- 1
• 女 -- gender -- 2

通过 key 管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

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

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

src/components/ListDemo.vue

<template>
    <ul>
        <li v-for="category in categories" :key="category.id">{{category.name}}</li>
    </ul>
</template>

<script setup lang="ts">
    const categories = [
        {id:1,name:"PHP"},
        {id:2,name:"Vue 3"},
    ]
</script>

数组变化侦测

明明更新了数组数据，控制台中打印出来的结果也确实是更新了，但为什么页面中的内容没有被更新？下面一起来看看。

数据变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Vue 中，对于数组的使用，只有这些方法才会输出页面的渲染。

src/components/ListDemo.vue

<template>
    <button @click="clickHandle">变化</button>
    <ul>
        <li v-for="(user, index) in users" :key="index">{{user}}</li>
    </ul>
</template>

<script setup lang="ts">
    import {ref} from "vue"

    const users = ref(["王美丽", "王小丽", "王丽丽"])

    const clickHandle = function () {
        // 页面发生变化
        users.value.push("王美美");
    }
</script>

替换数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

<template>
    <button @click="clickHandle">变化</button>
    <ul>
        <li v-for="(user, index) in users" :key="index">{{user}}</li>
    </ul>
</template>

<script setup lang="ts">
    import {ref} from "vue"

    const users = ref(["王美丽", "王小丽", "王丽丽"])

    const clickHandle = function () {
        users.value = users.value.concat("王小小")      
    }
</script>