快捷導(dǎo)航

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

更新時(shí)間：2024年01月24日 14:12:11 作者：下雪天的夏風(fēng)

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

1.背景

當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí)，并且組件自身又比較復(fù)雜。如果一次性加載，可能等待時(shí)間較長(zhǎng)，體驗(yàn)不好。

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

2.實(shí)現(xiàn)

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

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

示例代碼：

2.1延遲加載的核心代碼

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

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

定義一個(gè)計(jì)數(shù)當(dāng)前重繪次數(shù)的變量，每次調(diào)用 callback 時(shí)自增，重繪次數(shù)達(dá)到最大則結(jié)束 requestAnimationFrame 的執(zhí)行。

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

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

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模擬的復(fù)雜組件

子組件內(nèi)部有 20000 個(gè)元素需要渲染，來模擬復(fù)雜的組件。

<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 個(gè)復(fù)雜子組件。

<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>