Vue列表頁渲染優(yōu)化詳解
更新時間：2017年07月24日 14:11:49 作者：zxy85189122
這篇文章主要為大家詳細介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue列表頁渲染優(yōu)化，具體內容如下
想法
初始化時，vue會對data做getter、setter改造，在現(xiàn)代瀏覽器里，雖然JS已經足夠快，但仍然有優(yōu)化空間。
列表頁的數據結構為：
list: [
// 每一項有不同的來源，不同來源的數據都不同，因此放到一個數組里
[{
sourceId: 'xmla', // 來源的唯一標識
id: 3001, // 資源的唯一標識
source: '喜馬拉雅', // 來源
title: '昆曲之牡丹亭',
imageUrl: 'http://x.baidu.com/x.gif',
album: 0, // 是否是專輯
hot: 1345,
anchor: '青雪'
}, {
sourceId: 'xmla', // 來源的唯一標識
id: 3005, // 資源的唯一標識
source: '手機百度', // 來源
title: '昆曲之牡丹亭',
imageUrl: 'http://x.baidu.com/x.gif',
album: 0, // 是否是專輯
hot: 1345,
anchor: '青雪'
}],
[{
sourceId: 'xmla',
id: 3002, // 資源的唯一標識
source: '喜馬拉雅', // 來源
title: '昆曲之春江花月夜',
imageUrl: 'http://x.baidu.com/x.gif',
album: 0, // 是否是專輯
hot: 1345,
anchor: '青雪'
}],
]
}
Vue會給數組中的每個值設置getter和setter來監(jiān)聽它們的變動
但其實列表數據是不會發(fā)生變化的，這些操作是多余的。
方法一：使用Object.freeze()
Object.freeze()是ES5新增的API，用來凍結一個對象，禁止對象被修改。vue 1.0.18+以后，不會對已凍結的data做getter、setter轉換。
如果確保某個data不需要跟蹤依賴，可以使用Object.freeze將其凍結。需要注意的是，被凍結的是對象的值，仍然可以將引用整個替換調?？聪旅胬樱?/p>
<p v-for="item in list">{{ item.value }}</p>
new Vue({
data: {
// vue不會對list里的object做getter、setter綁定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
created () {
// 界面不會有響應
this.list[0].value = 100;
// 下面兩種做法，界面都會響應
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})
當使用Vuex進行狀態(tài)管理時，應當在給state.xxx賦值前使用Object.freeze():
[LIST_INIT](state, {list}) {
Object.freeze(list);
state.list = list;
},
getter和setter沒有了。
方法二：傳string方法
由于從后端取回的數據本身為字符串，不進行JSON.parse()直接存在state中，即可阻止Vue的改造。
使用時，在頁面組件中引入字符串，JSON.parse()后可以直接賦值給this.XXX，如有需要還可以進一步子組件。
this.test = {
a:{
c:1,
d:2
},
b:2
}
<list-item :test="test.a"></list-item>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內容詳細，簡單易懂，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2023-01-01
這篇文章主要介紹了Vue3+Vite+ElementPlus構建的相關資料,文中還介紹如何在Vue3項目中加入ElementPlus庫,并提供了完整引入的示例,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue實現(xiàn)右鍵點擊彈框信息功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
在Web開發(fā)中,字符串處理是常見的需求之一,特別是在國際化應用中,對于文本的格式化處理尤為重要,本文將介紹如何使用Vue.js來構建一個簡單的在線英文字母大小寫轉換工具,需要的朋友可以參考下2024-09-09
vue使用axios實現(xiàn)文件上傳進度的實時更新詳解
最近在學習axios，然后項目就用到了，所以這篇文章主要給大家介紹了關于vue中利用axios實現(xiàn)文件上傳進度的實時更新的相關資料，文中先對axios進行了簡單的介紹，方法大家理解學習，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
在Vue的開發(fā)過程中，我們經常需要展示代碼片段或者進行代碼高亮與語法著色，Vue提供了多種方式來實現(xiàn)代碼高亮與語法著色，本文將為你詳細介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-i18n的9以上版本中@被用作特殊字符處理,直接用會報錯問題
這篇文章主要介紹了vue-i18n的9以上版本中@被用作特殊字符處理,直接用會報錯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標簽內添加任何內容,可以為組件生成一個唯一的哈希值,從而實現(xiàn)樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01