vue3 的v-for

在 Vue3 中，v-for 指令的用法与 Vue2 中基本相同，但是在性能上有所提升。Vue3 中的 v-for 指令支持使用 ref 和 reactive 对象作为数据源，也支持使用数组、Map 和 Set 等数据结构作为数据源。此外，Vue3 中的 v-for 指令还支持使用新的 key 风格，即 :key="xxx"。

下面是一个使用 ref 对象作为数据源的 v-for 示例：

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ])

    return {
      items
    }
  }
}
</script>