Vue2實現(xiàn)組件延遲加載的示例代碼

更新時間：2024年01月24日 14:12:11 作者：下雪天的夏風

當一個頁面需要加載較多個組件時,并且組件自身又比較復雜,如果一次性加載,可能等待時間較長,體驗不好,這個時候就需要延遲加載了,本文為大家介紹了Vue2實現(xiàn)組件延遲加載的示例代碼,需要的可以參考下

1.背景

當一個頁面需要加載較多個組件時，并且組件自身又比較復雜。如果一次性加載，可能等待時間較長，體驗不好。

一種解決辦法：分批次的來渲染子組件。

2.實現(xiàn)

通過 requestAnimationFrame(callback) 實現(xiàn)，同時能夠控制按照指定順序來渲染。

簡單理解為：瀏覽器會按照一定的頻率來重繪頁面，大概 60次/s。每次重繪前都會執(zhí)行 callback 函數(shù)。這樣的話，我們可以在每次重繪前都只渲染一個組件，來實現(xiàn)組件的延遲加載。

示例代碼：

2.1延遲加載的核心代碼

通過 mixin 來實現(xiàn)。大致邏輯：

首先會傳入一個最大重繪次數(shù)。

定義一個計數(shù)當前重繪次數(shù)的變量，每次調用 callback 時自增，重繪次數(shù)達到最大則結束 requestAnimationFrame 的執(zhí)行。

定義一個方法，參數(shù)為指定的順序，返回值用于判斷組件是否展示。

比如 v-if="deferItem(5)" 表示瀏覽器第5次重繪時渲染該組件。

export default function defer(maxFrameCount) {
  return {
    data() {
      return {
        frameCount: 0,
      };
    },
    mounted() {
      const refreshFrame = () => {
        requestAnimationFrame(() => {
          this.frameCount++;
          if (this.frameCount < maxFrameCount) {
            refreshFrame();
          }
        });
      };
      refreshFrame();
    },
    methods: {
      deferItem(showFrameCount) {
        return this.frameCount >= showFrameCount;
      },
    },
  };
}

2.2模擬的復雜組件

子組件內部有 20000 個元素需要渲染，來模擬復雜的組件。

<template>
  <div class="container">
    <div v-for="n in 20000" class="item"></div>
  </div>
</template>

<script></script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 300px;
  height: 300px;
}

.item {
  width: 5px;
  height: 5px;
  background-color: #eee;
  margin: 0.1em;
}
</style>

2.3父組件

模擬渲染 25 個復雜子組件。

<template>
  <div class="container">
    <div v-for="n in 25" :key="n" class="wrapper">
      <HeavyComp v-if="deferItem(n)" />
    </div>
  </div>
</template>

<script>
import HeavyComp from "./components/HeavyComp.vue";
import defer from "./mixins/defer";
export default {
  components: {
    HeavyComp,
  },
  mixins: [defer(25)],
};
</script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.wrapper {
  border: 1px solid salmon;
}
</style>