---

歡迎關注 『VUE』 專欄，持續(xù)更新中
歡迎關注 『VUE』 專欄，持續(xù)更新中

加載速度的優(yōu)化

實際項目中你可能會有幾十個組件,如果一開始就加載了全部組件(哪怕其中有些組件你暫時用不到)這無疑大大增加了響應時間,用戶體驗很差.
我們這里就直接加載了componentA和B,但是實際上如果不點擊切換組件,我們暫時用不到B.

與前面的同步相對的就是異步,你加載當前需要用的個別組件,分步驟而不是同一步驟加載所有組件.

---

示例代碼

注意異步引用的方式import { defineAsyncComponent } from "vue";然后const ComponentB = defineAsyncComponent(() => import("./components/ComponentB.vue") );

<script>
import { defineAsyncComponent } from "vue";
import ComponentA from "./components/ComponentA.vue";
//import ComponentB from "./components/ComponentB.vue";
const ComponentB = defineAsyncComponent(() =>import("./components/ComponentB.vue")
);
</script>

App.vue

<template><KeepAlive><component :is="choseComponent"></component></KeepAlive><button @click="changeComponent">切換組件</button>
</template><script>
import { defineAsyncComponent } from "vue";
import ComponentA from "./components/ComponentA.vue";
//import ComponentB from "./components/ComponentB.vue";
const ComponentB = defineAsyncComponent(() =>import("./components/ComponentB.vue")
);export default {data() {return {choseComponent: "ComponentA",};},components: {ComponentA,ComponentB,},methods: {changeComponent() {console.log(this.choseComponent);this.choseComponent =this.choseComponent == "ComponentA" ? "ComponentB" : "ComponentA";},},
};
</script>

網(wǎng)頁剛剛加載時只有A的加載沒有B

只有在組件切換到B時才加載了B

---

總結

大家喜歡的話，給個👍，點個關注！給大家分享更多計算機專業(yè)學生的求學之路！

版權聲明：

發(fā)現(xiàn)你走遠了@mzh原創(chuàng)作品，轉載必須標注原文鏈接

Copyright 2024 mzh

Crated：2024-3-1

歡迎關注 『VUE』 專欄，持續(xù)更新中
歡迎關注 『VUE』 專欄，持續(xù)更新中
『未完待續(xù)』

---