Vue2實(shí)現(xiàn)組件延遲加載的示例代碼
1.背景
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí)，并且組件自身又比較復(fù)雜。如果一次性加載，可能等待時(shí)間較長(zhǎng)，體驗(yàn)不好。
一種解決辦法：分批次的來(lái)渲染子組件。
2.實(shí)現(xiàn)
通過(guò) requestAnimationFrame(callback) 實(shí)現(xiàn)，同時(shí)能夠控制按照指定順序來(lái)渲染。
簡(jiǎn)單理解為：瀏覽器會(huì)按照一定的頻率來(lái)重繪頁(yè)面，大概 60次/s。每次重繪前都會(huì)執(zhí)行 callback 函數(shù)。這樣的話(huà)，我們可以在每次重繪前都只渲染一個(gè)組件，來(lái)實(shí)現(xiàn)組件的延遲加載。
示例代碼：
2.1延遲加載的核心代碼
通過(guò) mixin 來(lái)實(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è)元素需要渲染，來(lái)模擬復(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>
3.效果
到此這篇關(guān)于Vue2實(shí)現(xiàn)組件延遲加載的示例代碼的文章就介紹到這了,更多相關(guān)Vue2組件延遲加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了詳解vue中父子參數(shù)傳遞雙向的方式不同,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進(jìn)行數(shù)據(jù)渲染時(shí),有時(shí)會(huì)遇到渲染順序混亂的問(wèn)題,這種問(wèn)題主要與 Vue 的響應(yīng)式系統(tǒng)、DOM 更新機(jī)制以及數(shù)組的變更方法有關(guān),以下是對(duì)這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對(duì)象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下2023-04-04
vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下2022-05-05
vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
文章比較了Vue和React的核心設(shè)計(jì)理念、響應(yīng)式系統(tǒng)、虛擬DOM、編譯時(shí)優(yōu)化和功能特性,Vue通過(guò)編譯時(shí)優(yōu)化和響應(yīng)式系統(tǒng)實(shí)現(xiàn)細(xì)粒度更新,而React依賴(lài)運(yùn)行時(shí)調(diào)度（Fiber）實(shí)現(xiàn)可控的更新優(yōu)先級(jí),兩者都支持函數(shù)式編程,但React在函數(shù)式編程方面提供了更高的靈活性2025-02-02
vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決
這篇文章主要介紹了vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開(kāi)發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10