2.3　列表渲染

2.3.1　遍歷元素

當遍歷一個數組或枚舉一個對象進行迭代循環展示時，會用到列表渲染的指令v-for。v-for指令類似于JavaScript中的for循環，在Vue中提供了v-for指令用來循環數組。

在使用v-for指令時，可以對數組、對象、數字、字符串進行循環，獲取其每個元素。在使用v-for指令時，要按照特定的for-in語法進行遍歷，代碼如下：

在上面的示例代碼中，items是源數據數組，item為每次迭代遍歷的數組元素，index為元素在數組中的索引。

1．遍歷數組

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.14所示。

在v-for指令中，可以使用of替代in作為分隔符，因為它更接近JavaScript迭代器的語法，代碼如下：

2．遍歷對象

v-for指令不僅可以遍歷數組，還可以用來遍歷對象，代碼如下：

在上面的示例代碼中，使用v-for循環迭代出來的元素有兩個參數，第一個參數為對象屬性的值，第二個參數為對象的屬性。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.15所示。

使用v-for指令遍歷對象時，迭代的元素使用第3個參數作為索引，在上面的代碼中添加第3個參數，代碼如下：

在瀏覽器中運行的效果如圖2.16所示。

3．遍歷整數

v-for還可以直接遍歷整數，代碼如下：

在瀏覽器中運行的效果如圖2.17所示。

2.3.2　維護狀態

當Vue正在更新使用v-for渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue將不會移動DOM元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置被正確渲染。這類似于Vue 1. x的語句track-by="$ index"。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時DOM狀態（例如：表單輸入值）的列表渲染輸出。

為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，需要為每項提供一個唯一key屬性，代碼如下：

建議盡可能在使用v-for時提供key屬性，除非遍歷輸出的DOM內容非常簡單，或者刻意依賴默認行為以獲取性能上的提升。

注意　不要使用對象或數組之類的非基本類型值作為v-for的key，而要使用字符串或數值類型的值。

2.3.3　數組更新檢測

Vue為了增強列表渲染功能，增加了一組觀察數組的方法，并且可以顯示一個數組的過濾或排序的副本。

1．變更方法

Vue將被偵聽的數組的變更方法進行了包裹，所以它們也會觸發視圖更新。這些被包裹過的方法如下。

（1）push（）：接收任意數量的參數并逐個追加到原數組末尾，返回新數組的長度。

（2）pop（）：移除數組最后一項，返回被移除的元素。

（3）shift（）：移除數組的第一項，返回被移除的元素。

（4）unshift（）：在數組前追加新元素，返回新數組長度。

（5）splice（）：刪除指定索引的元素，并且可以在該索引處添加新元素。

（6）sort（）：對數組進行排序，默認按字典升序排序，返回排序后的數組。

（7）reverse（）：用于反轉數組的順序，返回反轉后的數組。

這些方法類似于JavaScript中操作數組的方法。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.18所示。

2．替換數組

變更方法，顧名思義，會變更調用這些方法的原始數組。相比之下，也有非變更方法，例如filter（）、concat（）和slice（）。它們不會變更原始數組，而是返回一個新數組。當使用非變更方法時，可以用新數組替換舊數組。

非變更方法如下。

（1）concat（）：創建當前數組的副本，然后拼接參數中的數組，返回拼接后的新數組。

（2）slice（）：將數組的索引作為參數，可從已有的數組中返回選定的元素，返回新數組。

（3）map（）：對數組的每一項運行給定函數，返回每次函數調用的結果所組成的數組。

（4）filter（）：對數組的每一項運行給定函數，該函數會返回值為true的項所組成的數組。

非變更方法也和JavaScript中的方法類似。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.19所示。

在上面的代碼示例中，要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據（使用非變更方法），可以使用filter（）方法。

2.3.4　對象變更檢測注意事項

由于JavaScript的限制，Vue無法檢測對象屬性的添加或移除。由于Vue會在初始化實例時對屬性執行getter/setter轉化，所以屬性必須在data對象上存在才能讓Vue將它轉換為響應式的，這是由Vue的雙向數據綁定決定的。

index.html文件代碼如下：

在上面的示例代碼中添加的age屬性不是響應式的，所以在頁面中不會被渲染出來，在瀏覽器中運行的效果如圖2.20所示。

對于已經創建的實例，Vue不允許動態添加根級別的響應式屬性。但是，可以使用Vue.set（object，propertyName，value）方法向嵌套對象添加響應式屬性，代碼如下：

我們可以使用上面的示例代碼，為Vue實例中的對象添加響應式屬性。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.21所示。

除了上面的方法，還可以使用vm. $ set實例方法添加響應式屬性，它只是全局Vue.set的別名，代碼如下：

有時可能需要為已有對象賦值多個新屬性，例如使用Object.assign（）或_.extend（）。但是，這樣添加到對象上的新屬性不會觸發更新。在這種情況下，應該用原對象與要混合進去的對象的屬性一起創建一個新的對象，代碼如下：

2.3.5　在<template>上使用v-for

類似于v-if，也可以利用帶有v-for的<template>來循環渲染一段包含多個元素的內容。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.22所示。

template中可以放執行語句，最終編譯后不會被渲染成元素。一般常和v-for指令及v-if指令結合使用，這樣會使整個HTML結構沒有多余的元素，從而使整個結構更加清晰。

2.3.6　v-for與v-if一同使用

當它們處于同一節點，v-for的優先級比v-if更高，這意味著v-if將分別重復運行于每個v-for循環中。當只想為部分項渲染節點時，這種優先級的機制十分有用。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.23所示。

注意　不推薦在同一個元素上使用v-for和v-if，必要情況下應該替換成計算屬性computed。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.24所示。