不可不知的 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)

1. 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 源碼的這裏 https://github.com/vuejs/vue/...

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 在作詳細介紹，今天就到這了，晚安😴。

歡迎關注微信公衆號：花橙橙

以爲不錯記得點贊哦~