列表渲染 {#list-rendering}

v-for {#v-for}

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

js const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
js data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } 
  1. <li v-for="item in items">
  2.   {{ item.message }}
  3. </li>

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

js const parentMessage = ref('Parent') const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
js data() { return { parentMessage: 'Parent', items: [{ message: 'Foo' }, { message: 'Bar' }] } } 
  1. <li v-for="(item, index) in items">
  2.   {{ parentMessage }} - {{ index }} - {{ item.message }}
  3. </li>

  • {{ parentMessage }} - {{ index }} - {{ item.message }}
    • 在 Playground 尝试一下
    在 Playground 尝试一下

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

    1. const parentMessage = 'Parent'
    2. const items = [
    3.   /* ... */
    4. ]
    6. items.forEach((item, index) => {
    7.   // 可以访问外层的 `parentMessage`
    8.   // 而 `item` 和 `index` 只在这个作用域可用
    9.   console.log(parentMessage, item.message, index)
    10. })

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

    1. <li v-for="{ message } in items">
    2.   {{ message }}
    3. </li>
    5. <!-- 有 index 索引时 -->
    6. <li v-for="({ message }, index) in items">
    7.   {{ message }} {{ index }}
    8. </li>

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

    1. <li v-for="item in items">
    2.   <span v-for="childItem in item.children">
    3.     {{ item.message }} {{ childItem }}
    4.   </span>
    5. </li>

    你也可以使用 of 作为分隔符来替代 in，这也和 JavaScript 的迭代器语法非常相似：

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

    v-for 与对象 {#v-for-with-an-object}

    你也可以使用 v-for 来遍历一个对象的所有属性。

    js const myObject = reactive({ title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' })
    js data() { return { myObject: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } } 
    1. <ul>
    2.   <li v-for="value in myObject">
    3.     {{ value }}
    4.   </li>
    5. </ul>

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

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

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

    1. <li v-for="(value, key, index) in myObject">
    2.   {{ index }}. {{ key }}: {{ value }}
    3. </li>
    在 Playground 尝试一下
    在 Playground 尝试一下

    :::tip 注意 当遍历一个对象时，顺序是依据 Object.keys() 的枚举顺序，由于不同的 JavaScript 引擎可能会有不同的实现，所以顺序可能会不一致。 :::

    在 v-for 里使用值范围 {#v-for-with-a-range}

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

    1. <span v-for="n in 10">{{ n }}</span>

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

    <template> 上的 v-for {#v-for-on-template}

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

    1. <ul>
    2.   <template v-for="item in items">
    3.     <li>{{ item.msg }}</li>
    4.     <li class="divider" role="presentation"></li>
    5.   </template>
    6. </ul>

    v-for 与 v-if {#v-for-with-v-if}

    :::warning 注意 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请转阅风格指南查看更多细节。 :::

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

    1. <!--
    2.  这会抛出一个错误，因为属性 todo 此时
    3.  没有在该实例上定义
    4. -->
    5. <li v-for="todo in todos" v-if="!todo.isComplete">
    6.   {{ todo.name }}
    7. </li>

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

    1. <template v-for="todo in todos">
    2.   <li v-if="!todo.isComplete">
    3.     {{ todo.name }}
    4.   </li>
    5. </template>

    通过 key 管理状态 {#maintaining-state-with-key}

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

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

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

    1. <div v-for="item in items" :key="item.id">
    2.   <!-- 内容 -->
    3. </div>

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

    1. <template v-for="todo in todos" :key="todo.name">
    2.   <li>{{ todo.name }}</li>
    3. </template>

    :::tip 注意 key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象 property key 相混淆。 :::

    推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者有意依赖默认行为来获得性能增益。

    key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。要获取 key attribute 的更多用途细节，请看 key API 文档。

    组件上使用 v-for {#v-for-with-a-component}

    这一小节假设你已了解组件的相关知识，或者你也可以先跳过这里，之后再回来看。

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

    1. <my-component v-for="item in items" :key="item.id"></my-component>

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

    1. <my-component
    2.   v-for="(item, index) in items"
    3.   :item="item"
    4.   :index="index"
    5.   :key="item.id"
    6. ></my-component>

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

    一个简单的待办事项列表的例子，展示了如何通过 v-for 来渲染一个组件列表，并向每个实例中传入不同的数据。
    一个简单的待办事项列表的例子，展示了如何通过 v-for 来渲染一个组件列表，并向每个实例中传入不同的数据。

    数组变化侦测 {#array-change-detection}

    变更方法 {#mutation-methods}

    Vue 包装了一批侦听数组的变更方法，以至于这些方法可以触发视图更新。被包装的变更方法如下：

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

    替换一个数组 {#replacing-an-array}

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

    js // `item` 是一个数组的 ref items.value = item.values.filter((item) => item.message.match(/Foo/))
    js this.items = this.items.filter((item) => item.message.match(/Foo/))

    你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。

    展示过滤或排序后的结果 {#displaying-filtered-sorted-results}

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

    举个例子：

    js const numbers = ref([1, 2, 3, 4, 5]) const evenNumbers = computed(() => { return numbers.value.filter((n) => n % 2 === 0) })
    js data() { return { numbers: [1, 2, 3, 4, 5] } }, computed: { evenNumbers() { return this.numbers.filter(n => n % 2 === 0) } } 
    1. <li v-for="n in evenNumbers">{{ n }}</li>

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

    js const sets = ref([ [1, 2, 3, 4, 5], [6, 7, 8, 9, 10] ]) function even(numbers) { return numbers.filter((number) => number % 2 === 0) }
    js data() { return { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] } }, methods: { even(numbers) { return numbers.filter(number => number % 2 === 0) } } 
    1. <ul v-for="numbers in sets">
    2.   <li v-for="n in even(numbers)">{{ n }}</li>
    3. </ul>

    在计算属性中使用 reverse() 和 sort() 请保持谨慎！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

    1. - return numbers.reverse()
    2. + return [...numbers].reverse()