快捷導(dǎo)航

vue3中實(shí)現(xiàn)異步組件的方法實(shí)例

更新時(shí)間：2023年06月07日 15:25:13 作者：前端小顧

前端開發(fā)經(jīng)常遇到異步的問題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

使用場(chǎng)景一：當(dāng)組件進(jìn)入視窗時(shí)再進(jìn)行加載

假設(shè)頁(yè)面中有三個(gè)組件A、B、C

C組件中有一張圖片

<template>
  <div class="A">
    <A></A>
  </div>
  <div class="B">
    <B></B>
  </div>
  <div>
    <C></C>
  </div>
</template>
 
<script setup>
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
 
</script>

打開頁(yè)面：

如果一個(gè)頁(yè)面中的內(nèi)容非常多，用戶再首次打開時(shí)并沒有瀏覽到下方的內(nèi)容，但頁(yè)面必須加載完下方的內(nèi)容才會(huì)顯示，這無(wú)疑非常影響性能

接下來我們做一些調(diào)整

defineAsyncComponent
創(chuàng)建一個(gè)只有在需要時(shí)才會(huì)加載的異步組件。

defineAsyncComponent是vue3提供的內(nèi)置api。用于異步加載組件

但是僅靠這個(gè)api并不能完成我們所需要的功能

這里我們還需要借助vueUse中的一個(gè)api

首先我們需要安裝一下vueUse的依賴

npm i @vueuse/core

我們需要使用vueUse中的useIntersectionObserver

安裝完成后來修改一下我們的代碼：

<template>
  <div class="A">
    <A></A>
  </div>
  <div class="B">
    <B></B>
  </div>
  <div ref="target">
    <C v-if="targetIsVisible"></C>
  </div>
</template>
 
<script setup>
import A from './components/A.vue'
import B from './components/B.vue'
import { defineAsyncComponent, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'
 
const C = defineAsyncComponent(() =>           //異步引入組件
  import('./components/C.vue')
)
const target = ref(null)              //獲取需要操作的dom元素
const targetIsVisible = ref(false)   //定義一個(gè)dom元素顯示與隱藏開關(guān)
 
const { stop } = useIntersectionObserver(       //定義一個(gè)函數(shù)用于控制
  target,
  ([{ isIntersecting }]) => {                 //這里的isIntersecting表示的是dom元素是否進(jìn)入視窗，值為true或flase
    console.log(isIntersecting);
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting     //將isIntersecting賦值給開關(guān)，即表示進(jìn)入視窗就顯示該dom元素
    }
  },
)
 
</script>