vuedose.tips（系列翻译一）

Hi，大家好，欢迎来到 VueDose，在这里我们将尽可能的帮助像你我这样的开发工程师学习一些令人匪夷所思的小技巧。
通常来说我们需要获取一些 列表对象，比如说 用户，列表项，一些文章，等等，无论是什么。
而有时候，我们仅仅是获取而不必去修改这些数据，我们只需要显示，或者把这些数据保存着一个全局的公共仓库（类似 vuex 这样的管理仓库），我们可以使用类似如下代码段

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

备注：大家是怎么理解这段话
Vue by default makes reactive every first-level property for each object in the array.
实际上默认情况下，Vue会使得数组中的每一个对象的第一层属性具有易反映性，这样会导致处理一个大数组对象会消耗很多资源，有时候，我们的列表是分页的，但是在其他页面只是有该列表。
这种情况很常见，例如 Google Maps 标记就是一个庞大的对象体
因此，在这些情况下，如果我们阻止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]);

你是否想知道，性能到底提高了多少，那就请期待下一小节吧