vue3学习5：v-for

vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用 item in items 的特殊语法，其中， items 是待循环的数组， item 是当前的循环项。v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items。
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性：
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

其中需要注意必须加key这个值，否则会报Elements in iteration expect to have 'v-bind:key' directives的错误

举个栗子

<template>
  <div id="app">
      <ul>
        <li v-for="(user, i) in list" :key="i">id{{user.id}} 索引是：{{i}}，姓名是：{{user.name}}</li>
      </ul>
    </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      list: [
            { id: 1, name: 'jenny' },
            { id: 2, name: 'danny' },
          ],
    }
  },
  methods:{
  }
}
</script>