圖片懶加載，數(shù)據(jù)懶加載， 路由懶加載

1.圖片懶加載原理

1.1 開始時(shí) 不設(shè)置src屬性

1.2 圖片在可視區(qū)域內(nèi),設(shè)置src 然后加載圖片

1.3 使用API，intersectionObserver 可以用監(jiān)聽元素是否可見

1.4 實(shí)際開發(fā)中 在vueuse 使用?useIntersectionObserver

1.5 一般封裝成全局指令? <img v-lazy="xxxx" ，配合app.use做成獨(dú)立的插件。

2.數(shù)據(jù)懶加載

場(chǎng)景：我的主頁上有很多個(gè)模塊，每個(gè)模塊都發(fā)ajax拿數(shù)據(jù)，并且是在組件創(chuàng)建時(shí)發(fā)的請(qǐng)求。這樣有一個(gè)后果：靠近底層的模塊其實(shí)用戶都看不到，這個(gè)發(fā)請(qǐng)求浪費(fèi)性能。

思路：判斷當(dāng)前模塊是否可見，可見就發(fā)請(qǐng)求

做法： 封裝一個(gè)自定義的hooks，接收一個(gè)回調(diào)，返回一個(gè)ref。這個(gè)ref可以用在模塊的外層dom上 ： 當(dāng)這個(gè)ref引用的dom可見是，就執(zhí)行這個(gè)回調(diào)（發(fā)請(qǐng)求）

實(shí)操：借用vueuse, useIntersectionObserver去封裝。（react生態(tài)中，有一個(gè)和vueuse類似的庫： ahooks）