- 原文地址：Improve performance on large lists in Vue
- 原文作者：Alex Jover
- 譯者：程式猿何大叔
特別宣告：本文是作者 Alex Jover 釋出在 VueDose 上的一個系列。
版權歸作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。
嗨，大家好！歡迎來到 VueDose 的第一篇文章。我已經準備好在 VueDose 上開啟這段旅程，來幫助像你一樣的開發者們來學習一些厲害的技巧。
首先，在 VueDose 上釋出的文章都是很簡潔明瞭的，因為我相信這樣的行文風格對於讀者來說會更有幫助，所以我們現在就直接開始吧。
正文內容
通常我們在應用中會請求一些列表資料，比如說使用者列表、商品列表、文章列表等等……
而且有時候，我們並不會去修改這些請求回來的列表資料，而只是單純地去展示它們，或者是把它們儲存在全域性狀態管理器裡面（又稱之為 Vuex）。請求資料列表的示意程式碼如下所示：
export default {
data: () =>
({
users: {
}
}), async created() {
const users = await axios.get("/api/users");
this.users = users;
}
};
複製程式碼Vue 在預設情況下，會將陣列 this.users 中的，所有物件的第一層屬性設定為響應式資料。
這對於大型的物件陣列來說，效能成本非常的高。沒錯，的確有時候列表資料是有分頁的，但總會有一些情況下，是沒有進行分頁，繼而在前端展示的。
一個實際的例子就是谷歌地圖的標記點 markers 列表資料，這就是一個擁有很多物件的大型陣列。
所以，在一些特定的情況下，如果我們能夠阻止 Vue 將這些列表資料設定為響應式的，那麼我們就可以為專案帶來一些效能上的提升。實際上我們就是可以做到的，通過用 Object.freeze 方法，將獲取到的列表資料在賦值給元件之前，進行凍結：
export default {
data: () =>
({
users: {
}
}), async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
複製程式碼記住，同樣地可以應用到 Vuex 實踐中：
const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};
複製程式碼順便說一下，如果你確實有需要去修改請求得到的列表資料，那麼你仍然可以通過建立一個新的陣列來實現。舉個例子，給原列表資料新增一個同型別元素，可以這麼操作：
state.users = Object.freeze([...state.users, user]);
複製程式碼或許你會忍不住想問，這個操作到底能夠帶來多大的效能提升呀？具體的我們詳見下一篇文章，請繼續關注！
這就是今天的所有內容，我希望你能夠喜歡 ?。
你可以線上閱讀這篇 原文，裡面有可複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！
結語
此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~
如果想要了解我的更多，請查閱如下：
- 個人部落格：blog.hadesz.com
- 個人 github 倉庫：github.com/hadeshe93
- 個人微信公眾號：搜尋「程式猿何大叔」