v-for
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。对应数组遍历中的(value,index)
v-for="(item, index) in items"
也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似
v-for="({ message }, index) in items"
对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域
你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法
这里提一嘴,JavaScript for...in...更适合用来遍历对象而不是数组, 数组可以用for...of
v-for与对象
你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.values() 的返回值来决定。
v-for="value in myObject"
v-for="(value, key) in myObject"
v-for="(value, key, index) in myObject" //值 属性名 索引
v-for中使用访问值range
v-for="n in 10" 注意此处 n 的初值是从 1 开始而非 0。
v-for 与 v-if
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名
通过 key 管理状态
就是在v-for 后面绑带一个key :key
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。
为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：
<div v-for="item in items" :key="item.id"></div>
key 在这里是一个通过 v-bind 绑定的特殊 attribute。 请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。
推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。关于 key attribute 的更多用途细节，请参阅 key API 文档。
组件上使用 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"
/>
数组变化侦测
vue能够监听响应式数组的变更方法,并在它们被调用的时候触发相应的更新.
但是有些方法不改变原数组, 而是返回一个新的数组, 遇到非变更方法,需要我们将数组替换成新的
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
sort(),reverse()这两个是会在原数组上修改的, 如果只是希望返回一个计算属性,需要先复制一份.
filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。需要保留变更触发响应式更新, 需要重新赋值
变更方法
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：
push()pop()shift()unshift()splice()sort()reverse()
替换一个数组
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：
// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))
你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。(vue会最大化对DOM元素的复用, 响应式数组部分操作后重新赋值仍是一个高效的操作)
展示过滤或排序后的结果
有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。
在计算属性不可行的情况下 (例如在多层嵌套的 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> // numbers 是for循环的参数,不能作为计算属性的依赖
</ul>
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：
- return numbers.reverse()
+ return [...numbers].reverse() //这个是正确的
