vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
使用場(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>打開(kāi)頁(yè)面：
如果一個(gè)頁(yè)面中的內(nèi)容非常多，用戶再首次打開(kāi)時(shí)并沒(méi)有瀏覽到下方的內(nèi)容，但頁(yè)面必須加載完下方的內(nèi)容才會(huì)顯示，這無(wú)疑非常影響性能
接下來(lái)我們做一些調(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
安裝完成后來(lái)修改一下我們的代碼：
<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元素顯示與隱藏開(kāi)關(guān)
const { stop } = useIntersectionObserver( //定義一個(gè)函數(shù)用于控制
target,
([{ isIntersecting }]) => { //這里的isIntersecting表示的是dom元素是否進(jìn)入視窗，值為true或flase
console.log(isIntersecting);
if (isIntersecting) {
targetIsVisible.value = isIntersecting //將isIntersecting賦值給開(kāi)關(guān)，即表示進(jìn)入視窗就顯示該dom元素
}
},
)
</script>
這樣就實(shí)現(xiàn)了異步加載C組件，在頁(yè)面視窗滾動(dòng)到C組件時(shí)才會(huì)加載C組件。
總結(jié)
到此這篇關(guān)于vue3中實(shí)現(xiàn)異步組件的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題的解決
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無(wú)法輸入的問(wèn)題
這篇文章主要介紹了vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無(wú)法輸入的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列具體代碼
最近遇到一個(gè)動(dòng)態(tài)增加行和列的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò)
這篇文章主要介紹了vue項(xiàng)目下，如何用命令直接修復(fù)ESLint報(bào)錯(cuò)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來(lái)決定在 DOM 中是渲染還是銷毀元素或組件。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
使用Webpack 搭建 Vue3 開(kāi)發(fā)環(huán)境過(guò)程詳解
這篇文章主要介紹了使用Webpack 搭建 Vue3 開(kāi)發(fā)環(huán)境過(guò)程詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03