1，異步組件介紹

在項(xiàng)目中，有的組件僅在需要時(shí)才會加載，這時(shí)就需要用到異步組件。

異步組件本質(zhì)上是一個函數(shù)，該函數(shù)調(diào)用后返回一個Promise，Promise 成功的結(jié)果是一個組件對象。一般使用 import() 動態(tài)導(dǎo)入組件作為這個 Promise。

// 函數(shù)需要返回一個 Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

2，組件中使用

異步組件也可以在組件中使用，比如某些場景下需要獲取數(shù)據(jù)后才能加載某組件。

2.1，Vue2 語法

Vue2官網(wǎng)參考

<script>
// 返回Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

// 返回Promise
const AsyncComponent2 = () => import("./MyComp.vue")

export default {
  components: {
    // Vue會調(diào)用該函數(shù)，并等待 Promise完成，完成之前該組件位置什么也不渲染
    AsyncComponent,
  },
};
</script>

函數(shù)也可以返回有一個配置對象，并處理加載狀態(tài)。

const AsyncComponent = () => ({
  // 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)
  component: import('./MyComponent.vue'),
  // 異步組件加載時(shí)使用的組件
  loading: LoadingComponent,
  // 加載失敗時(shí)使用的組件
  error: ErrorComponent,
  // 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
  // 則使用加載失敗時(shí)使用的組件。默認(rèn)值是：`Infinity`
  timeout: 3000
})

2.2，Vue3 語法

Vue3官網(wǎng)參考

需要使用 defineAsyncComponent 方法來實(shí)現(xiàn)，函數(shù)同樣需要返回一個 Promise。

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  })
})

const AsyncComp2 = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)
</script>

也可以全局注冊

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

也能處理加載狀態(tài)

const AsyncComp = defineAsyncComponent({
  // 加載函數(shù)
  loader: () => import('./MyComponent.vue'),

  // 加載異步組件時(shí)使用的組件
  loadingComponent: LoadingComponent,
  // 展示加載組件前的延遲時(shí)間，默認(rèn)為 200ms
  delay: 200,

  // 加載失敗后展示的組件
  errorComponent: ErrorComponent,
  // 如果提供了一個 timeout 時(shí)間限制，并超時(shí)了
  // 也會顯示這里配置的報(bào)錯組件，默認(rèn)值是：Infinity
  timeout: 3000
})

3，路由中使用

路由懶加載

{
  name: "Home",
  path: "/",
  // webpackChunkName 用于分包
  component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),
  meta: { title: "首頁" },
}

Vue Router 只會在第一次進(jìn)入這個頁面時(shí)調(diào)用這個函數(shù)，然后使用緩存數(shù)據(jù)。也就是說，已經(jīng)加載過的組件不會重新加載。

3.1，vue3語法

封裝實(shí)現(xiàn)異步頁面。

// utils/index.js
import { defineAsyncComponent } from "vue";
import Loading from "../components/Loading.vue";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({
  trickleSpeed: 50,
  showSpinner: false,
});

function getAsyncPage(path) {
  return defineAsyncComponent({
    loader: async () => {
      NProgress.start();
      await delay();
      const comp = await import(path);
      NProgress.done();
      return comp;
    },
    loadingComponent: Loading, // 當(dāng)promise在pending狀態(tài)時(shí)，將顯示這里的組件
  });
}

import { getAsyncPage } from "../util";

const Home = getAsyncPage("../views/Home.vue");
const About = getAsyncPage("../views/About.vue");

export default [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

以上。文章來源地址http://www.zghlxwxcb.cn/news/detail-740359.html

到了這里，關(guān)于Vue 的異步組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！