前端开发性能优化-Vue响应式优化

vue 开发里面数据响应相关优化

在Vue开发中，经常会有加载大量数据的场景，如果按照原本的流程加载，Vue会对data中的数据设置数据响应式，有时候根本不需要进行响应式，仅仅是对其进行展示，这时候就可以使用Object.freeze对其进行冻结，Vue也不会再对其设置相关的响应式，页面加载速度会有一个质的提升。

冻结前

冻结后

从上面的分析结果看，将对象冻结后，响应式处理从>4000ms降到了0.2ms

<template>
  <div id="app">
    <button @click="handleClick">click me</button>
    <span>数据长度：{{ showData.length }}</span>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      showData: [],
    };
  },
  methods: {
    async handleClick() {
      console.time("click");
      this.loading = true;
      /**
       * 这里使用Object.freeze将对象冻结后，Vue内部将不再对其进行数据响应式设置
       */
      // this.showData = Object.freeze(await this.getData());
      this.showData = await this.getData();
      this.loading = false;
      console.timeEnd("click");
    },
    getData() {
      return new Promise((resolve) => {
        const result = [];
        for (let i = 0; i < 1000000; i++) {
          result.push({
            id: i,
            name: `name${i}`,
            address: {
              city: `city${i}`,
              province: `province${i}`,
            },
          });
        }
        resolve(result);
      });
    },
  },
};
</script>