Vue3后台管理模板中使用 v-for 列表渲染

v-for

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

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

<li v-for="item in items">
    {{ item.message }}
</li>

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

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

<li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 变量的作用域和下面的JavaScript代码很类似：

const parentMessage = 'Parent'
const items = [
    /* .... */
]


items.forEach((item, index)=>{
    console.log(parentMessage, item.message, index)
})

注意 v-for 是如何对应 forEach 回调的函数签名的。 实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

<li v-for="{message} in items">
    {{ message }}
</li>

<li v-for="({message}, index) in items">
    {{ message }} {{ index }}
</li>

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

<li v-for="item in items">
    <span v-for="childItem in item.children">
        {{ item.message }} {{ childItem }}
    </span>
</li>

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

<div v-for="item of items"></div>

v-for 与对象

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

const myObject = reactive({
    title: 'How to do lists in vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
})

<ul>
    <li v-for="value in myObject">
        {{ value }}
    </li>
</ul>

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

<li v-for="(value, key) in myObject">
    {{ key }} : {{ value }}
</li>

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

<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

<template> 上的 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
    </template>
</ul>

v-for 与 v-if

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

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

<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo.name }}
</li>

<!--

这会抛出一个错误，因为属性 todo 此时没有在该实例上定义

-->

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题（这也更加明显易读）

<template v-for="todo in todos">
    <li v-if="!todo.isComplete">
        {{ todo.name }}
    </li>
</tempalte>

通过 key 管理状态

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

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

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

<div v-for="item in items" :key="item.id">

</div>

当你使用 <template v-for> 时，key应该被放置在这个 <template>容器上：

<template v-for="todo in todos" :key="todo.name">
</template>

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

推荐在任何可行的时候为 v-for 提供一个 key Attribute，除非所迭代的DOM内容非常简单（例如：不包含组件或有状态的DOM元素），或者你想有意采用默认行为来提高性能。

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

组件上使用 v-for

我们可以直接在组件上使用 v-for，和在一般的元素上使用没去区别（别忘记提供一个key）：

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递给组件，我们还需要传递 props：

<MyComponent 
    v-for="(item, index) in items"
    :item="item"
    :index="index"
    :key="item.id"
/>

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

数组变化侦听

变更方法

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

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

替换一个数组

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

item.value = items.value.filter((item)=> item.message.match(/foo/))

你可能认为这将导致Vue丢弃现有的DOM并重新渲染整个列表 ---- 幸运的是，情况并非如此。

Vue实现了一些巧妙的方法来最大化对DOM元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会时一种非常搞笑的操作。

展示过滤或排序后的结果

有时，我们希望显示数组经过过滤或排序后的内容，而不市级变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例来说：

const number = ref([1,2,3,4,5])

const evenNumber = computed(()=>{
    return numbers.value.filter((n)=> n%2 === 0)
})

<li v-for="n in evenNumber">{{ n }}</li>

在计算属性不可行的情况下（例如在多层嵌套的v-for循环中），你可以使用以下方法：

const sets = ref([
    [1,2,3,4,5],
    [6,7,8,9,10]
])

function even(numbers){
    return numbers.filter((number)=> number % 2 === 0)
}

<ul v-for="numbers in sets">
    <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，技术函数中不应该这么做。请在调用这些方法钱创建一个原数组的副本：

更多vue3后台管理模板的技术资料，请访问：https://www.eleadmin.cn