一塊兒學Vue之列表渲染

在Vue開發中，列表數據綁定很是簡單易用，本文主要經過一些簡單的小例子，講述v-for的使用方法，僅供學習分享使用，若有不足之處，還請指正。

用 v-for 把一個數組對應爲一組元素

咱們能夠用 v-for 指令基於一個數組來渲染一個列表。 v-for 指令須要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。以下所示：

1 <ul>
2     <li v-for="fruit in fruits">
3         {{ fruit.name }}
4     </li>
5 </ul>

 在 v-for 塊中，咱們能夠訪問全部父做用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。以下所示：

1 <ul>
2     <li v-for="(fruit, index) in fruits">
3         {{ msg }} - {{ index }} - {{ fruit.name }}
4     </li>
5 </ul>

你也能夠用 of 替代 in 做爲分隔符，由於它更接近 JavaScript 迭代器的語法，以下所示：

1 <ul id="example-3">
2     <li v-for="fruit of fruits">
3         {{ fruit.name }}
4     </li>
5 </ul>

其中fruits是js中定義的一個數組，以下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             fruits: [
 7                 {id:0, name: 'Apple' },
 8                 {id:1, name: 'Pear' },
 9                 {id:2, name: 'Orange'},
10                 {id:3, name:'Banana'}
11             ]
12         }
13     });
14 </script>

在 v-for 裏使用對象

v-for 除了能夠遍歷數組，也能夠用 v-for 來遍歷一個對象的屬性，以下所示：

1 <ul>
2     <li v-for="v in book">
3         {{ v }}
4     </li>
5 </ul>

也能夠提供第二個的參數爲 property 名稱 (也就是鍵名)：以下所示：v,n分別表示：值和名稱

1 <ul>
2     <li v-for="(v,n) in book">
3         {{n}}--{{ v }}
4     </li>
5 </ul>

還能夠用第三個參數做爲索引：,i表示當前索引，以下所示：

1 <ul>
2     <li v-for="(v,n,i) in book">
3         {{n}}--{{ v }}---{{i}}
4     </li>
5 </ul>

綜上所述：

1. 對於數組，第一個參數是內容，第二個參數是索引；
2. 對於對象，第一個參數是值，第二個參數是名稱，第三個參數是索引。

注意：在遍歷對象時，會按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下都一致。

其中book是一個對象，以下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             book: {
 7                 title: 'How to do lists in Vue',
 8                 author: 'Jane Doe',
 9                 publishedAt: '2016-04-10'
10         }
11     });
12 </script>

維護狀態

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用「就地更新」的策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每一個元素，而且確保它們在每一個索引位置正確渲染。這個默認的模式是高效的，可是隻適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性，以下所示：

1 <div v-for="(f,i) in fruits" v-bind:key="f.id">
2     <!-- 內容 -->
3     {{f.name}}-----{{i}}
4 </div>

建議儘量在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。由於它是 Vue 識別節點的一個通用機制，key 並不只與 v-for 特別關聯。不要使用對象或數組之類的非基本類型值做爲 v-for 的 key，請用字符串或數值類型的值。

數組更新檢測

Vue 將被偵聽的數組的變異方法進行了包裹，因此它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

你能夠打開控制檯，而後對前面例子的 items 數組嘗試調用變異方法。以下所示：

替換數組

變異方法，顧名思義，會改變調用了這些方法的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它們不會改變原始數組，而老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組：

1 app.items = app.items.filter(function (item) {
2   return item.message.match(/Foo/)
3 })

你可能認爲這將致使 Vue 丟棄現有 DOM 並從新渲染整個列表。幸運的是，事實並不是如此。Vue 爲了使得 DOM 元素獲得最大範圍的重用而實現了一些智能的啓發式方法，因此用一個含有相同元素的數組去替換原來的數組是很是高效的操做。

注意：因爲 JavaScript 的限制，Vue 不能檢測如下數組的變更：

1.當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2.當你修改數組的長度時，例如：vm.items.length = newLength

對象變動檢測注意事項

因爲 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除，以下所示：

1 vm.items[1] = 'x' // 不是響應性的
2 vm.items.length = 2 // 不是響應性的

爲了解決第一類問題，如下兩種方式均可以實現：

1 // Vue.set
2 Vue.set(vm.items, indexOfItem, newValue)
3 // Array.prototype.splice
4 vm.items.splice(indexOfItem, 1, newValue)
5 //你也可使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：
6 vm.$set(vm.items, indexOfItem, newValue)

 1 // `vm.a` 如今是響應式的
 2 vm.b = 2
 3 // `vm.b` 不是響應式的
 4 //對於已經建立的實例，Vue 不容許動態添加根級別的響應式屬性。
 5 //可是，可使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性。例如，對於：
 6 //你能夠添加一個新的 age 屬性到嵌套的 userProfile 對象：
 7 //Vue.set(vm.userProfile, 'age', 27)
 8 //你還可使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：
 9 //vm.$set(vm.userProfile, 'age', 27)
10 //有時你可能須要爲已有對象賦值多個新屬性，好比使用 Object.assign() 或 _.extend()。
11 //在這種狀況下，你應該用兩個對象的屬性建立一個新的對象。因此，若是你想添加新的響應式屬性，不要像這樣：
12 Object.assign(vm.userProfile, {
13     age: 27,
14      favoriteColor: 'Vue Green'
15 });
16 //你應該這樣作：
17 vm.userProfile = Object.assign({}, vm.userProfile, {
18     age: 27,
19     favoriteColor: 'Vue Green'
20 });

View Code

爲了解決第二類問題，你可使用 splice：

1 vm.items.splice(newLength)

顯示過濾/排序後的結果

有時，咱們想要顯示一個數組通過過濾或排序後的版本，而不實際改變或重置原始數據。在這種狀況下，能夠建立一個計算屬性，來返回過濾或排序後的數組。

1 <ul>
2     <li v-for="n in evenNumbers">{{ n }}</li>
3 </ul>

在計算屬性不適用的狀況下 (例如，在嵌套 v-for 循環中) 你可使用一個方法：

1  <ul>
2     <li v-for="n in even(numbers)">{{ n }}</li>
3 </ul>

其中，evenNumbers爲計算屬性，even爲一個函數，以下所示：

 1 <script type="text/javascript">
 2     var app = new Vue({
 3         el: '#app',
 4         data: {
 5             msg: 'hello world!!!',
 6             numbers: [ 1, 2, 3, 4, 5 ],        
 7         },
 8         methods: {    
 9             even: function (numbers) {
10                 return numbers.filter(function (number) {
11                     return number % 2 === 0;
12                 })
13             }
14         },
15         computed: {
16             evenNumbers: function () {
17                 return this.numbers.filter(function (number) {
18                     return number % 2 === 0;
19                 })
20             }
21         }
22 });
23 </script>
24                             

在 v-for 裏使用值範圍

v-for 也能夠接受整數。在這種狀況下，它會把模板重複對應次數。

1 <div>
2     <span v-for="n in 10">{{ n }} </span>
3 </div>

在 <template> 上使用 v-for

相似於 v-if，你也能夠利用帶有 v-for 的 <template> 來循環渲染一段包含多個元素的內容。好比：

1 <ul>
2     <template v-for="f in fruits">
3         <li>{{ f.name }}</li>
4         <li class="divider" role="presentation"></li>
5     </template>
6 </ul>

備註

醜奴兒·書博山道中壁

辛棄疾

少年不識愁滋味，愛上層樓。愛上層樓，爲賦新詞強說愁。

而今識盡愁滋味，欲說還休。欲說還休，卻道天涼好個秋。