你不可不知的Vue.js列表渲染詳解

介紹

用 v-for 把一個數組對應為頁面上的一組元素

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

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

我們都知道既然有循環那肯定少不了對索引的處理。v-for 指令給我們提供了可選的第二個參數，即當前項的索引。

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

index 就是那個當前索引了。

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

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

在 v-for 里使用對象

是噠，很明顯 v-for 也可以用來遍歷一個對象的屬性。

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

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

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

還可以用第三個參數作為索引

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

維護狀態

敲黑板啦哈~

vuejs 為了維護循環列表的狀態需要提供唯一的 key 屬性。
這個唯一的 key 可以為我們提供列表元素狀態的更新，避免重復渲染等優化頁面的性能。

這個 key 很關鍵，并不推薦使用簡單的索引作為 key 的值，因為會有造成重復渲染混亂的可能。

數組更新檢測

咳咳～ 繼續敲黑板

我們在寫程序的時候，往往會有數據更新但是頁面元素沒有跟著對應變化的情況。

數組列表的更新檢測 vue 為我們提供了一套解決方案，但是需要注意它們在使用的方式上是不同的。

變異方法

意思就是以下的數組處理方法可以觸發視圖上的更新。

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

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

非變異方法

數組也有一些方法不會改變原始數據，而是返回新的數組。

filter()
concat()
slice()

返回新的數組在頁面更新渲染的性能大家不必擔心，vue 已經為我們做好了重用工作。

需要注意，在有些情況 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 // 不是響應性的

為了解決這類問題，官方提供了兩種解決方案。

1、Vue.set

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

2、Array.prototype.splice

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

如果我們在處理數據無法更新視圖的時候記得試試這個方法。

對象變更檢測注意事項

對于對象屬性的增加和刪除，對于已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。

對于這個問題可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性。

v-for 還可以處理整數的循環

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

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

神秘的 set

綜上我們會知道 js 無法處理組件即時更新的都由 vue 提供的這個 set 方法接管。那么這個 set 有什么過人之處，可以完成組件與數據的綁定呢？

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

set 方法開始會有一些邏輯判斷，對于數組的處理依然使用的是 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
})

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。