記錄個人Vue.js從會用到精通之路 8

列表渲染

v-for能夠用來遍歷一個元素，而後渲染出一個列表！

1.用v-for遍歷一個數組

• 基本語法：v-for="item in items"，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。
• v-for="(item,index) in items"，v-for還支持可選的第二個參數，是遍歷出元素對應的索引。

2.用v-for遍歷一個對象

• 基本語法：v-for="value in object"，其中object是目標對象，而value則是被迭代出的屬性址。
• v-for="(value,key,index) in object"，在遍歷對象的狀況下，第二個屬性是property，第一個屬性是object[property],第三個參數是索引，從0開始。
• 值得一提的是，在遍歷對象時，會按照Object.keys()的結果遍歷，而不是for..in..,我想這樣設計的緣由是不會遍歷到原型鏈上的屬性吧。

3.維護狀態與key值

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用「就地更新」的策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每一個元素，而且確保它們在每一個索引位置正確渲染。 啥意思？？？？？

www.zhihu.com/question/61…

這篇文章直接講的明明白白！可是有個問題，我在此時此刻讀文檔，能夠很肯定的告訴你，官網上寫的是「就地更新」，可是我在查閱的時候，不少資料包括這一篇中，都是「就地複用」，我嚴重懷疑他倆是一回事，而後更名字了。而後我在寫一點本身的想法：

咱們在v-if條件渲染中提到過，Vue爲了提高性能，會對DOM進行高度的複用。那在v-for進行列表渲染的時候，若是元素的位置的發生了變化，好比第一個和第二個交換了位置，Vue並不會去相應的改變DOM的順序，而是就地更新，可是在更新中也不會傻傻的把元素所有刪除，再從新建立，而是會高度複用，若是不能複用，那隻能刪了從新來。這也就是爲何，在這篇知乎解答中，第一個input框中的值，沒有發生改變。由於input被複用了，而給定屬性key，vue會認爲即便DOM元素能夠複用，但他倆仍然是徹底不一樣的倆玩意兒，就不會複用了。

4.數組更新檢測

4.1變異方法

咱們都知道，Vue使用了雙向綁定，也就是vm層數據的變化必定會相應的在v層上獲得體現。好比咱們去列表渲染一個數組中的元素，當向數組中push一個元素的時候，視圖層必定會改變。可是，咱們回過頭在思考，若是是簡簡單單的push操做，數組的引用不會改變，那憑什麼能被響應呢？

Vue重寫了push方法（變異），這些變異的方法會改變原數組

除了push，還有不少變異方法。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

4.2非變異方法

它們不會改變原數組 而是返回一個新的數組

• filter()
• concat()
• slice() 能夠用新數組代替舊數組來達到響應式的目的

4.3注意事項（極可能成爲開發的bug）

Vue並不能檢測如下數組的變更：

• 當咱們利用索引值設置一個數組項的時候，例如：vm.items[indexOfItem] = newValue
• 當咱們修改數組的長度時，例如：vm.items.length = newLength

第一種狀況的解決方法：

//  Vue.set解決
Vue.set(vm.items,indexOfItem,newValue)
vm.$set(vm.items,indexOfItem,newValue) //經過實例方法，該方法是Vue.set的一個別名
複製代碼

//  使用變異的splice方法
vm.items.splice(indexOfItem,1,newValue)
複製代碼

第二種狀況的解決方法：

vm.items.splice(newLength)
複製代碼

4.4對象變動檢測註冊事項

• Vue不能檢測對象屬性的添加或刪除

// Vue.set解決
Vue.set(object,propertyName,value)
vm.$set(object,propertyName,value) // Vue.set的別名
複製代碼

• 若是須要爲已又對象賦值多個屬性，能夠使用Object.assign()

vm.userProfile = Object.assign({},vm.userProfile,{
    age: 27,
    favoriteColor: 'Vue'
})
複製代碼

4.5 v-for裏使用指範圍

<li v-for="n in 10">{{n}}</li>  //  1 2 3 4 5 6 7 8 9 10
複製代碼

4.6 v-for和v-if不要一塊兒使用，由於v-for的優先級更高。