Vue 3中v-for使用詳解

Vue 3中的v-for指令是用來循環渲染數組或對象的，它可以在模板中快速的將數組或對象的數據渲染成視圖。本文將從多個方面詳細闡述Vue 3中v-for的使用方法。

一、Vue3中v-for循環數組

Vue3中v-for指令可以循環遍歷一個數組，將數組中的每一個數據渲染到模板中。在循環中，我們可以用`v-for`指令的第二個參數`index`來獲取當前循環的下標。

<div v-for="(item,index) in items" :key="index">
  {{ index }} - {{ item }}
</div>


import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive(['apple','banana','cherry','durian']);
    return { items };
  }
}
</script>

上面的代碼中，我們先通過`reactive`定義了一個名為`items`的響應式數組，數組中包含了四個水果，然後在模板中使用`v-for`循環遍曆數組。在循環中，我們可以通過`item`來獲取數組中當前循環的值，通過`index`來獲取當前循環的下標，最後將下標和數組中的值渲染到模板中。注意，在循環中需要設置`key`屬性來保證循環的正確性。

二、Vue3中v-for循環不了reactive

在Vue3中，由於reactive是一個函數，所以我們不能使用v-for指令對它進行循環遍歷，如果想要循環遍歷reactive，可以先將其通過`toRefs`解構成一個普通的對象，然後再進行循環遍歷。

<template>
  <div v-for="(item,key) in data" :key="key">
    {{key}} -- {{item}}
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const data = toRefs(state);
    return { data };
  }
}
</script>

在上面的代碼中，我們創建了一個reactive對象`state`，然後使用`toRefs`函數將其解構成一個普通的對象`data`，最後在模板中使用`v-for`循環遍歷`data`，並將每一個數據渲染到視圖中。

三、Vue3中v-for拿到子組件實例

在Vue3中，我們可以通過`v-for`指令將一個數組的數據循環渲染到多個子組件中，並且可以在子組件中訪問到對應的數據。為了方便說明，我們這裡以一個簡單的計數器組件為例：

// Counter.vue
<template>
  <div>
    <button @click="increment">+</button>
    {{ count }}
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const increment = () => state.count++;
    return { ...state, increment };
  }
}
</script>


// App.vue
<template>
  <div v-for="(item,index) in items" :key="index">
    <Counter :count="item" :key="index"></Counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'
import { reactive } from 'vue';

export default {
  components: { Counter },
  setup() {
    const items = reactive([1, 2, 3, 4]);
    return { items };
  }
}
</script>

在上面的代碼中，我們通過`v-for`指令將一個數組`items`循環渲染到了Counter組件中，並且將循環的每一個值都通過props的形式傳遞給了Counter組件。Counter組件內部通過`props`獲取到了數組中當前循環的值，並將其渲染到視圖中。由於每次循環都會創建一個新的Counter組件實例，因此我們需要設置`key`屬性來保證循環的正確性。