列表渲染v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名，v-for 也支持使用可选的第二个参数表示当前项的位置索引。
data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } }
1、使用v-for遍历数组
<li v-for="(item, index) in items"> {{ item.message }} - {{ index }} </li>
2、你可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：
<li v-for="({ message }, index) in items"> {{ message }} {{ index }} </li>
3、你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
<li v-for="({ message }, index) of items"> {{ message }} {{ index }} </li>
4、你也可以使用 v-for 来遍历一个对象的所有属性
data() { return { myObject: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }
遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
第二个参数表示属性名 (例如 key)：
第三个参数表示位置索引：
<li v-for="(value, key, index) in myObject"> {{ index }}. {{ key }}: {{ value }} </li>
5、v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1…n 的取值范围重复多次。
<div v-for="n in 10"> {{ n }} </div>
6、v-if和v-for的优先级
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
在vue2中，v-for的优先级高于v-if
在vue3中，v-if的优先级高于v-for
在外新包装一层 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：
<template v-for="todo in todos"> <li v-if="!todo.isComplete"> {{ todo.name }} </li> </template>
7、通过 key 管理状态
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key。
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
key 这个特殊的属性主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
8、 index 作为 key 是不推荐使用的
- 性能问题：在 Vue中，使用索引作为 key 会导致 Vue 在跟踪每个项目的身份和数据变化时产生较大的性能开销。因为当列表项发生变化时，Vue 需要重新创建和渲染整个列表，而不是只更新单个元素。
- 数据一致性问题：如果使用索引作为 key，当数据项发生移动时（例如排序或过滤操作），索引也会发生改变。这可能会导致数据和视图不一致，因为 Vue 无法跟踪这些变化。
- 影响 Vue 的 diff 算法：Vue 的 diff 算法基于 key 进行。如果使用索引作为 key，当列表发生变化时，Vue 将无法正确地确定哪些元素发生了变化，哪些没有。这可能会导致不必要的渲染和性能问题。
为了避免这些问题，建议为每个列表项分配一个唯一的、不可变的 key 值。可以是每个项目的唯一标识符（例如数据库 ID），或者是一种可以唯一标识项目的方法（例如将项目添加到一个由字符串组成的字典中，将项目作为字典的键）。
同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。
