vue列表頁渲染優化，具體內容如下
想法
初始化時，vue會對data做getter、setter改造，在現代瀏覽器里，雖然JS已經足夠快，但仍然有優化空間。
列表頁的數據結構為：
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來監聽它們的變動
但其實列表數據是不會發生變化的，這些操作是多余的。
方法一：使用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進行狀態管理時，應當在給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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
