vue3使用组合式用v-for完成水果列表的渲染，实现以下效果：水果列表 水果编号：1—-水果名称：苹果—-详细信息：汁水丰富 水果编号2——水果名称：柠檬—-详细信息—-酸

在Vue 3中，你可以通过模板、组件和组合API（如Composition API）来实现这个水果列表的渲染。这里我们使用Composition API的`for-of`循环和` reactive`来管理数据。首先，创建一个数据源数组：

<template>
  <div id="fruitList">
    <ul ref="fruitListRef">
      <li v-for="(fruit, index) in fruits" :key="index">
        <p>水果编号：{{ fruit.number }}</p>
        <p>水果名称：{{ fruit.name }}</p>
        <p>详细信息：{{ fruit.info }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义一个复用的数据对象
const fruitTemplate = {
  number: null,
  name: '',
  info: '',
};

// 创建响应式的fruits数组
const fruits = ref([{ ...fruitTemplate, number: 1, name: '苹果', info: '汁水丰富' }, { ...fruitTemplate, number: 2, name: '柠檬', info: '酸' }]);
</script>

在这个例子中，我们使用了`ref`来创建一个响应式数组`fruits`，然后在模板里使用`v-for`遍历这个数组，对每个元素应用动态属性绑定。这样，当`fruits`数组的内容改变时，列表会自动更新。