v-for

v-for 介紹

Mike Lin
@zenzenlin

v-for 是

➤ 簡單來說是一種讓你可以「根據資料陣列重複渲染 DOM 節點」的語法糖

當你使用 v-for 時，Vue 會依據你提供的陣列或可疊代物件，為每一個項目建立一個對應的 DOM 節點（也可以是元件），並把當前項目的值與索引傳給你使用。在內部，每次資料變動時，Vue 會重新比對陣列變化，並以最小的 DOM 操作來更新畫面。

這是一種透過「資料驅動 UI」的設計理念實現的模板語法。

把陣列想像成一個「模型的清單」，而 v-for 就像是複印機，會幫你把清單中每個項目「渲染」成一塊 UI，並保持同步更新。

array
object
<script setup>
import { ref } from 'vue'

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

<template>
  // 使用解構
  <li v-for="{ message } in items">
    {{ message }}
  </li>

  // 多層嵌套
  <li v-for="item in items">
    <span v-for="childItem in item.children">
      {{ item.message }} {{ childItem }}
    </span>
  </li>
</template>

使用 key 管理狀態

➤ 簡單來說是讓 Vue「識別每個渲染項目」的唯一 ID，用來提升效能與正確性

當你用 v-for 渲染一組清單時，Vue 必須在每次資料變動時「聰明地更新」哪些 DOM 要增刪改。這時 key 就像是 Vue 的身分證——用來追蹤哪一個項目對應哪一塊 DOM。否則沒有 key 的話，Vue 會用「靠位置比對」就地更新的方式來判斷變更；有了 key，Vue 就能用「靠身分證」來快速且精準比對每一項，從而重用和重新排序現有的元素。

為什麼要加 key？

  • 精準追蹤
    當資料改動時，Vue 可以只更新變動的部分，而不必重建整個清單的 DOM 結構
  • 避免 UI 錯亂
    例如有輸入框或動畫元件時，如果沒加 key，用位置對比會導致錯位或值亂跳
  • 提升效能
    有了 key，Vue 的 diff 過程能快速定位哪些項目需要重繪，少做無謂工
v-if & v-show
v-if & v-show 介紹
v-model
v-model 介紹