翻譯：提升vue.js中大型數據的性能

時間 2019-11-06

標籤翻譯提升 vue.js vue 大型數據性能欄目 JavaScript 简体版

原文原文鏈接

前言

爲了提升英文水平，嘗試着翻譯一些英文技術文章，首先就從這個Vue的小技巧文章開始，目前英文版一共22篇。計劃用時2~3個月翻譯完成。前端

目前進度[4/22]vue

原文連接

Improve performance on large lists in Vue.jsios

譯文

你好！歡迎你們訪問VueDose的第一篇文章！咱們在VueDose中開始冒險吧，你會喜歡這些對你有幫助的小技巧。axios

VueDose的全部的文章都很是的簡潔，我相信人們在這種格式下更容易找到有用的東西。因此，讓咱們直奔主題。api

一般咱們須要獲取對象數據，好比用戶，項目，文章，等等等等·····數組

有時，咱們甚至不須要修改它們，只是爲了展現它們或在（a.k.a. Vuex）中存貯它們的全局狀態。那麼獲取這個數據的簡單代碼以下：bash

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = users;
  }
};
複製代碼

Vue會自動循環數組的每一個對象，並對每一個一級屬性進行響應。async

對於大型數組對象來講這是一個昂貴的作法。是的，有時候你能夠把這些數據分頁，可是，其餘人就能從前端拿到你整個數據。post

谷歌地圖標記一般就是這種狀況，事實上它們是一個巨大的對象。性能

因此，在這些狀況下，若是可以阻止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]);
複製代碼

你想知道性能提高多少？咱們會在下一篇文章看到它，因此，請繼續關注。

今天就到這裏了！但願你會喜歡這第一篇文章（鬼臉）。

你能夠在線閱讀文章tip online（能夠複製/粘貼代碼），可是請你記住，若是你喜歡，要和全部同事分享VueDose。

下週見。

Alex

個人理解

這篇文章說的內容主要是若是你肯定數據是純展現用的，若是你一次請求的數據特別大的話，那麼能夠用 Object.freeze 來凍結你的數據，凍結了數據以後會阻止Vue的默認響應機制，會提升Vue的性能。

Object.freeze()的定義： Object.freeze() 方法能夠凍結一個對象。一個被凍結的對象不再能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。freeze() 返回和傳入的參數相同的對象。