Vue Object.freeze 性能优化

博客地址：http://www.globm.top/blog/1/detail/17

Object.freeze优化长列表

Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。

对于data()或vuex中冻结的对象，vue不会做getter和setter的转换。因此对于一个不变的、大数据量的数组或Object数据来说，使用Object.freeze()可以有效地提升性能。

data

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]);

开启performance

在main.js中添加：

Vue.config.performance = process.env.NODE_ENV !== "production";