介紹

用 v-for 把一個(gè)數(shù)組對(duì)應(yīng)為頁(yè)面上的一組元素

vue.js 使用的是 v-for 指令來(lái)處理組件元素的循環(huán)迭代邏輯。通常它會(huì)和 v-if 配合使用，達(dá)到我們所需要的處理邏輯。
v-for 的語(yǔ)法形式是 item in items，其中 items 就是我們要循環(huán)的數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

我們都知道既然有循環(huán)那肯定少不了對(duì)索引的處理。v-for 指令給我們提供了可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。

<ul id="example-2">
 <li v-for="(item, index) in items">
 {{ parentMessage }} - {{ index }} - {{ item.message }}
 </li>
</ul>

index 就是那個(gè)當(dāng)前索引了。

你也可以使用 of 替代 in 作為分隔符。

<div v-for="item of items"></div>

在 v-for 里使用對(duì)象

是噠，很明顯 v-for 也可以用來(lái)遍歷一個(gè)對(duì)象的屬性。

<ul id="v-for-object" class="demo">
 <li v-for="value in object">
 {{ value }}
 </li>
</ul>

也可以提供第二個(gè)參數(shù)為 property 名稱 (也就是鍵名)

<div v-for="(value, name) in object">
 {{ name }}: {{ value }}
</div>

還可以用第三個(gè)參數(shù)作為索引

<div v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
</div>

維護(hù)狀態(tài)

敲黑板啦哈~

vuejs 為了維護(hù)循環(huán)列表的狀態(tài)需要提供唯一的 key 屬性。
這個(gè)唯一的 key 可以為我們提供列表元素狀態(tài)的更新，避免重復(fù)渲染等優(yōu)化頁(yè)面的性能。

這個(gè) key 很關(guān)鍵，并不推薦使用簡(jiǎn)單的索引作為 key 的值，因?yàn)闀?huì)有造成重復(fù)渲染混亂的可能。

數(shù)組更新檢測(cè)

咳咳～ 繼續(xù)敲黑板

我們?cè)趯懗绦虻臅r(shí)候，往往會(huì)有數(shù)據(jù)更新但是頁(yè)面元素沒(méi)有跟著對(duì)應(yīng)變化的情況。

數(shù)組列表的更新檢測(cè) vue 為我們提供了一套解決方案，但是需要注意它們?cè)谑褂玫姆绞缴鲜遣煌摹?br />

變異方法

意思就是以下的數(shù)組處理方法可以觸發(fā)視圖上的更新。

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

需要注意的是它們處理的都是原始數(shù)組。也就是在原來(lái)的數(shù)組上增加刪除或者排序操作。

非變異方法

數(shù)組也有一些方法不會(huì)改變?cè)紨?shù)據(jù)，而是返回新的數(shù)組。

filter()
concat()
slice()

返回新的數(shù)組在頁(yè)面更新渲染的性能大家不必?fù)?dān)心，vue 已經(jīng)為我們做好了重用工作。

需要注意，在有些情況 vue 無(wú)法檢測(cè)數(shù)組變動(dòng)的情況如下：

1. 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

var vm = new Vue({
 data: {
 items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的

為了解決這類問(wèn)題，官方提供了兩種解決方案。

1、Vue.set

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

2、Array.prototype.splice

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

如果我們?cè)谔幚頂?shù)據(jù)無(wú)法更新視圖的時(shí)候記得試試這個(gè)方法。

對(duì)象變更檢測(cè)注意事項(xiàng)

對(duì)于對(duì)象屬性的增加和刪除，對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。

對(duì)于這個(gè)問(wèn)題可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。

v-for 還可以處理整數(shù)的循環(huán)

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

最后提醒使用 v-for 時(shí)一定要記得帶上 key 喲！

神秘的 set

綜上我們會(huì)知道 js 無(wú)法處理組件即時(shí)更新的都由 vue 提供的這個(gè) set 方法接管。那么這個(gè) set 有什么過(guò)人之處，可以完成組件與數(shù)據(jù)的綁定呢？

關(guān)鍵位置可以看 vue 源碼的這里 github.com/vuejs/vue/b…

set 方法開(kāi)始會(huì)有一些邏輯判斷，對(duì)于數(shù)組的處理依然使用的是 splice 方法。

if (Array.isArray(target) && isValidArrayIndex(key)) {
 target.length = Math.max(target.length, key)
 target.splice(key, 1, val)
 return val
}

其余的就交給我們 vue 不支持的 IE8 ECMAScript5 特性 Object.defineProperty

Object.defineProperty(obj, key, {
 value: val,
 enumerable: !!enumerable,
 writable: true,
 configurable: true
})

下次我會(huì)對(duì) Object.defineProperty 在做詳細(xì)介紹，今天就到這了，晚安😴。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論