Vue3理解(6)

列表渲染

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

2.在v-for块中可以完整访问父作用域内的属性和变量，v-for的第二个参数表示当前项的位置索引。

3.你也可以使用of分隔符代替in这更接近JavaScript的迭代器语法。

4.你也可以使用v-for遍历对象的所有属性,遍历的顺序会基于对象调用object.keys()的返回值来决定，通过提供的第二个参数表示属性名，第三个参数为位置索引。

5.在<template>标签上使用v-for来渲染一个包含多个元素的块。

6.v-for和v-if同时使用是不推荐的，这二者优先级不明显，当它们同时出现在一个节点上v-if比v-for优先级高，这也就意味着v-if的条件将无法访问到v-for定义的变量别名，如果要解决这个问题可以在外层套上一层<template>标签将v-for写在<template>标签上这样就解决这个问题了。

7.key的作用，Vue是默认按照就地更新的策略来更新通过v-for渲染的元素列表的，当数据项数据发生改变Vue不会随着移动DOM元素顺序，而是就地更新每个元素,确保它们在原本指定的索引位置上渲染，默认模式很高效但它只适用于列表渲染输出结果不依赖子组件状态或者临时DOM状态的情况。

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

推荐在任何可行的时候为v-for添加一个key属性，除非迭代的DOM内容非常简单,key的绑定值期望是一个基础类型的值,例如string字符串或者number数字。

8.Vue能够侦测到数组的变更方法push()，pop()，shift()，unshift()，splice()，sort()，reverse()，替换掉一个数组方法，filter()，concat()，slice()这些都不会改变原数组而是返回一个新数组。

const items = ref([{name:"xiaoming",age:18}])<span v-for="item in items">{{item.name}}
</span>