1. v-for 基礎(chǔ)語(yǔ)法

遍歷數(shù)組

v-for指令用于基于源數(shù)據(jù)多次渲染元素，是Vue.js中最常用的列表渲染方式。

基本用法（不獲取索引）

<ul>
    <li v-for="item in names">{{item}}</li>
</ul>

獲取索引值

<ul>
    <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>

遍歷對(duì)象

v-for也可以用于遍歷對(duì)象的屬性，支持三種參數(shù)格式。

僅獲取值

在遍歷對(duì)象的過(guò)程中，如果只是獲取一個(gè)值，那么獲取到的是value

<ul>
    <li v-for="item in info">{{item}}</li>
</ul>

獲取鍵和值

獲取key和value 格式：(value, key)

<ul>
    <li v-for="(value, key) in info">{{value}} - {{key}}</li>
</ul>

獲取鍵、值和索引

獲取key和value和index 格式：(value, key, index)

<ul>
    <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
</ul>

2. 關(guān)鍵屬性：key的重要性

為什么需要key

官方推薦我們?cè)谑褂胿-for時(shí)，給對(duì)應(yīng)的元素或組件添加上一個(gè) :key 屬性。key的作用主要是為了更高效的更新虛擬DOM。

• 性能優(yōu)化：key幫助Vue識(shí)別哪些元素被改變、添加或移除，以優(yōu)化渲染性能

• 元素追蹤：Vue使用"就地復(fù)用"策略，key確保元素被正確跟蹤

• 避免渲染錯(cuò)誤：唯一key防止列表更新時(shí)出現(xiàn)意外的DOM操作

正確使用key

<!-- 推薦：使用唯一標(biāo)識(shí)符 -->
<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
</ul>

<!-- 避免使用索引作為key -->
<ul>
    <li v-for="(item, index) in items" :key="index">{{item}}</li>
</ul>

3. 高級(jí)用法和技巧

遍歷數(shù)字范圍

<span v-for="n in 5" :key="n">{{ n }}</span>

這將渲染數(shù)字1到5。

使用template元素

當(dāng)需要循環(huán)渲染多個(gè)元素時(shí)，可以使用<template>標(biāo)簽。

<template v-for="item in items">
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
</template>

嵌套循環(huán)

<div v-for="category in categories" :key="category.id">
    <h3>{{ category.name }}</h3>
    <ul>
        <li v-for="item in category.items" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</div>

4. 性能優(yōu)化最佳實(shí)踐

避免v-for與v-if同時(shí)使用

不推薦的做法：

<li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
</li>

推薦的做法：

<!-- 使用計(jì)算屬性過(guò)濾 -->
<li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
</li>

<script>
computed: {
    activeUsers() {
        return this.users.filter(user => user.isActive);
    }
}
</script>

使用計(jì)算屬性處理復(fù)雜數(shù)據(jù)

<template>
    <ul>
        <li v-for="item in filteredItems" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</template>

<script>
export default {
    computed: {
        filteredItems() {
            return this.items.filter(item => item.price < 50);
        }
    }
}
</script>

5. 響應(yīng)式數(shù)組更新

在Vue.js中，數(shù)組的響應(yīng)式處理是一個(gè)非常重要的概念。Vue能夠檢測(cè)到以下數(shù)組方法的變化并自動(dòng)更新視圖：

• push(), pop()

• shift(), unshift()

• splice(), sort(), reverse()

Vue響應(yīng)式數(shù)組方法速查表

響應(yīng)式數(shù)組方法詳解

1. 七大變異方法（響應(yīng)式）

Vue重寫(xiě)了數(shù)組的7個(gè)原生方法，使其能夠觸發(fā)視圖更新：

• push()? - 在數(shù)組末尾添加元素

  this.letters.push('F'); // 添加單個(gè)元素
  this.letters.push('F', 'G', 'H'); // 添加多個(gè)元素

• pop()? - 刪除并返回?cái)?shù)組的最后一個(gè)元素

  this.letters.pop(); // 刪除最后一個(gè)元素

• shift()? - 刪除并返回?cái)?shù)組的第一個(gè)元素

  this.letters.shift(); // 刪除第一個(gè)元素

• unshift()? - 在數(shù)組開(kāi)頭添加元素

  this.letters.unshift('Z'); // 在開(kāi)頭添加單個(gè)元素
  this.letters.unshift('X', 'Y', 'Z'); // 添加多個(gè)元素

• splice()? - 多功能方法（刪除/插入/替換）

  // 刪除：從索引1開(kāi)始刪除1個(gè)元素
  this.letters.splice(1, 1);
  
  // 替換：從索引1開(kāi)始替換3個(gè)元素
  this.letters.splice(1, 3, 'M', 'N', 'O');
  
  // 插入：從索引1開(kāi)始插入元素（不刪除）
  this.letters.splice(1, 0, 'X', 'Y', 'Z');

• sort()? - 對(duì)數(shù)組元素進(jìn)行排序

  this.letters.sort(); // 默認(rèn)按字母順序排序

• reverse()? - 反轉(zhuǎn)數(shù)組元素的順序

  this.letters.reverse(); // 將數(shù)組反轉(zhuǎn)

2. 非響應(yīng)式操作及解決方案

直接通過(guò)索引修改元素不會(huì)觸發(fā)更新：

// 以下操作不會(huì)觸發(fā)視圖更新！
this.letters[0] = 'BBB'; // ? 非響應(yīng)式

解決方案：

• 使用splice()方法：

  this.letters.splice(0, 1, 'BBB'); // ? 響應(yīng)式

• 使用Vue.set()或this.$set()：

  Vue.set(this.letters, 0, 'BBB'); // ? 響應(yīng)式
  // 或
  this.$set(this.letters, 0, 'BBB'); // ? 響應(yīng)式

實(shí)際應(yīng)用示例

這里是一些實(shí)用的操作示例：

methods: {
    btnClick() {
        // 清空數(shù)組的幾種方式
        this.letters = []; // 方法1：重新賦值（響應(yīng)式）
        this.letters.splice(0); // 方法2：刪除所有元素（響應(yīng)式）
        
        // 刪除部分元素
        const startIndex = 2;
        this.letters.splice(startIndex, this.letters.length - startIndex);
        
        // 批量替換元素
        this.letters.splice(1, 3, 'X', 'Y', 'Z'); // 從索引1開(kāi)始替換3個(gè)元素
    }
}

掌握Vue中數(shù)組的響應(yīng)式操作方法對(duì)于開(kāi)發(fā)Vue應(yīng)用至關(guān)重要。記住關(guān)鍵點(diǎn)：優(yōu)先使用7大變異方法，避免直接通過(guò)索引修改元素，必要時(shí)使用Vue.set()或this.$set()。

希望這份學(xué)習(xí)筆記能幫助你更好地理解和應(yīng)用Vue中的數(shù)組響應(yīng)式特性！

6. 實(shí)際應(yīng)用場(chǎng)景

動(dòng)態(tài)列表渲染

<div id="app">
    <input v-model="newItem" @keyup.enter="addItem">
    <ul>
        <li v-for="(item, index) in items" :key="item.id">
            {{ item.text }}
            <button @click="removeItem(index)">刪除</button>
        </li>
    </ul>
</div>

表格數(shù)據(jù)展示

<table>
    <thead>
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(person, index) in persons" :key="person.id">
            <td>{{ index + 1 }}</td>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
        </tr>
    </tbody>
</table>

7. 注意事項(xiàng)

1. key的唯一性：確保每個(gè)列表項(xiàng)的key都是唯一的

2. 數(shù)組更新檢測(cè)：對(duì)于非變更方法（如filter、concat），需要重新賦值數(shù)組

3. 對(duì)象屬性順序：遍歷對(duì)象時(shí)，屬性順序不一定是定義時(shí)的順序

4. 性能考慮：大型列表考慮使用虛擬滾動(dòng)技術(shù)優(yōu)化性能

通過(guò)合理運(yùn)用v-for指令及其相關(guān)優(yōu)化技巧，可以構(gòu)建出高效、動(dòng)態(tài)的用戶界面，提升應(yīng)用性能和用戶體驗(yàn)。

到此這篇關(guān)于Vue列表渲染v-for用法完全解析的文章就介紹到這了,更多相關(guān)Vue列表渲染v-for用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論