vue3的v-for（item，index）in end怎么做响应式

在 Vue3 中，`v-for` 中的 `item` 和 `index` 变量默认是响应式的，因此当你修改数组中的某一项时，`item` 和 `index` 所对应的值也会自动更新。以下是一个示例：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      {{ item.name }} - {{ index }}
      <button @click="changeName(index)">Change Name</button>
    </li>
  </ul>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' }
      ]
    })

    const changeName = (index) => {
      state.list[index].name = 'new name'
    }

    return {
      state,
      changeName
    }
  }
}
</script>

在上面的示例中，当我们点击 `Change Name` 按钮时，会修改数组中对应项的 `name` 属性，这样就会触发响应式更新，从而更新对应的列表项的文本内容。