长列表性能优化

使用Object.freeze优化Vue中的不需要响应式监听的数据

在2.x版本中Vue会通过Object.defineProperty对数据进行劫持, 以实现双向数据绑定. 但在一些特定的业务场景, 组件只需要进行纯数据展示, 不会有任何变化, 此时我们可能不需要Vue对来数据进行劫持. 在大量数据需要进行呈现时, 如果禁止Vue对数据进行劫持, 会明显减少组件初始化的时间.

export default {
  data: () => ({
    userList: []
  }),
  async created() {
    const userList = await this.$service.get("/getuserList");
    this.userList = Object.freeze(userList);
  }
};

使用Object.freeze后，Vue的双向数据绑定实效，这也就是带来性能提升的原因。