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

介紹

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都做網(wǎng)站、全南網(wǎng)絡(luò)推廣、成都小程序開發(fā)、全南網(wǎng)絡(luò)營銷、全南企業(yè)策劃、全南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供全南建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

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

vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯。通常它會和 v-if 配合使用，達到我們所需要的處理邏輯。
v-for 的語法形式是 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)那肯定少不了對索引的處理。v-for 指令給我們提供了可選的第二個參數(shù)，即當前項的索引。

<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>

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

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

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

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

維護狀態(tài)

敲黑板啦哈~

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

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

數(shù)組更新檢測

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

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

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

變異方法

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

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

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

非變異方法

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

filter()
concat()
slice()

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

需要注意，在有些情況 vue 無法檢測數(shù)組變動的情況如下：

當你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
當你修改數(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)性的

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

1、Vue.set

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

2、Array.prototype.splice

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

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

對象變更檢測注意事項

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

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

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

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

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

神秘的 set

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

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

set 方法開始會有一些邏輯判斷，對于數(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
})

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁題目：你不可不知的Vue.js列表渲染詳解
網(wǎng)站URL：http://muchs.cn/article38/gphesp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開發(fā)、微信公眾號、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容