列表渲染 · Vue速學快練立上手

### v-for 把一個數組對應為一組元素 ``` <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> ``` * items 數據數組 * item 迭代的數組元素別名在v-for中，可以訪問父作用域的屬性， v-for 還支持一個可選的第二個參數，即當前項的索引 ``` <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ``` 可以用 of 替代 in 作為分隔符/ ### 在v-for里面使用對象 v-for 也可對象屬性 ``` <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }) ``` 第二個參數：鍵名 ``` <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> ``` 第三個參數：索引 ``` <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> ``` 在遍歷對象時，會按`Object.keys()`的結果遍歷，但是**不能**保證它的結果在不同的 JavaScript 引擎下都一致。 ### 維護狀態 v-for渲染元素時，默認使用“就地更新”的策略，如果數據項的順序改變， Vue不會移動DOM元素來匹配數據項的順序，而是就地更新每個元素，確保它們在每個索引位置正確渲染。這個默認的模式是高效的，但是**只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出**。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一`key`屬性 ``` <div v-for="item in items" v-bind:key="item.id">  </div> ``` 建議盡可能在使用`v-for`時提供`key`attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。因為它是 Vue 識別節點的一個通用機制，`key`并不僅與`v-for`特別關聯。后面我們將在指南中看到，它還具有其它用途。 **不要使用對象或數組之類的非基本類型值作為`v-for`的`key`。請用字符串或數值類型的值。** ### 數組更新檢測 #### 變異方法-Mutation method 變異方法-調用這些方法會改變原始數組。 Vue對以下數組的變異方法進行了包裹，它們也會觸發視圖更新，包括： * push() * pop() * shift() * unshift() * splice() * sort() * reverse() ### 替換數組非變異方法 non-mutating , 比如: filter()、concat()和slice()，它們不會改變原始數組，而是返回一個新數組。使用非變異方法式，可以使用新數組替換舊數組 ``` example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ``` 你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。 #### 注意事項由于 JavaScript 的限制，Vue**不能**檢測以下數組的變動： 1.當你利用索引直接設置一個數組項時，例如：`vm.items[indexOfItem] = newValue` 2. 當你修改數組的長度時，例如：`vm.items.length = newLength` 比如： ``` var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的 ``` 為了解決第一類問題，以下兩種方式都可以實現和`vm.items[indexOfItem] = newValue`相同的效果，同時也將在響應式系統內觸發狀態更新： ``` // Vue.set Vue.set(vm.items, indexOfItem, newValue) ``` ``` // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) ``` 你也可以使用[`vm.$set`](https://cn.vuejs.org/v2/api/#vm-set)實例方法，該方法是全局方法`Vue.set`的一個別名： ``` vm.$set(vm.items, indexOfItem, newValue) ``` 為了解決第二類問題，你可以使用 splice： ``` 為了解決第二類問題，你可以使用 splice： ``` ### 對象變更檢測注意事項還是由于 JavaScript 的限制，**Vue 不能檢測對象屬性的添加或刪除**： ``` var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的 ``` 對于已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。但是，可以使用`Vue.set(object, propertyName, value)`方法向嵌套對象添加響應式屬性。例如，對于： ``` var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) ``` 你可以添加一個新的`age`屬性到嵌套的`userProfile`對象： ``` Vue.set(vm.userProfile, 'age', 27) ``` 你還可以使用`vm.$set`實例方法，它只是全局`Vue.set`的別名： ``` vm.$set(vm.userProfile, 'age', 27) ``` 有時你可能需要為已有對象賦值多個新屬性，比如使用`Object.assign()`或`_.extend()`。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣： ``` Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ``` 你應該這樣做： ``` vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ``` ### 顯示過濾/排序后的結果顯示過濾或排序后的版本，但不改變或重置原始數據，可以創建一個計算屬性，來返回過濾或排序后的數組。例如： ``` <li v-for="n in evenNumbers">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } ``` 在計算屬性不適用的情況下 (例如，在嵌套`v-for`循環中) 你可以使用一個方法： ``` <li v-for="n in even(numbers)">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } ``` ### 在v-for 里使用值范圍 ``` <div> <span v-for="n in 10">{{ n }} </span> </div> ``` ### 在<template>上使用v-for ``` <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> ``` ### v-for 與 v-if 一同使用當它們處于同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環中。當你只想為部分項渲染節點時，這種優先級的機制會十分有用，如下： ``` <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ``` 上面的代碼將只渲染未完成的 todo。而如果你的目的是有條件地跳過循環的執行，那么可以將 v-if 置于外層元素 (或 <template>)上。如： ``` <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> ``` ### 在組件上使用v-for ``` <my-component v-for="item in items" :key="item.id"></my-component> ``` 2.2.0+ 的版本里，當在組件上使用 v-for 時，key 現在是必須的。然而，任何數據都不會被自動傳遞到組件里，因為組件有自己獨立的作用域。為了把迭代數據傳遞到組件里，我們要使用 prop： ``` <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> ``` 不自動將 item 注入到組件里的原因是，這會使得組件與 v-for 的運作緊密耦合。明確組件數據的來源能夠使組件在其他場合重復使用。