【譯】Vue 的小奇技（第一篇）：提升大型數據列表的性能

• 原文地址：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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄