【譯】Vue 的小奇技（第一篇）：提高大型資料列表的效能
特別宣告：本文是作者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]); 複製程式碼
或許你會忍不住想問，這個操作到底能夠帶來多大的效能提升呀？具體的我們詳見下一篇文章，請繼續關注！
這就是今天的所有內容，我希望你能夠喜歡 :stuck_out_tongue:。
你可以線上閱讀這篇原文，裡面有可複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！