dedecms做网站怎么查看,网站空间续费合同,网站推广策划包含哪些内容,2018年网站开发语言排行组件数据懒加载-基本使用 目标#xff1a;通过useIntersectionObserver优化新鲜好物和人气推荐模块 电商类网站#xff0c;尤其是首页#xff0c;内容有好几屏#xff0c;而如果一上来就加载所有屏的数据#xff0c;并渲染所有屏的内容会导致首页加载很慢。
数据懒加载通过useIntersectionObserver优化新鲜好物和人气推荐模块 电商类网站尤其是首页内容有好几屏而如果一上来就加载所有屏的数据并渲染所有屏的内容会导致首页加载很慢。
数据懒加载等组件正式进入到可视区中时才把组件内部的ajax请求发起否则不请求数据
1优化新鲜好物
script langts setup
const { home } useStore()
const target ref(null)
const { stop } useIntersectionObserver(target, ([{ isIntersecting }]) {console.log(isIntersecting)// isIntersecting 是否进入可视区域true是进入 false是移出if (isIntersecting) {home.getNewList()stop()}
})
/scripttemplatediv classhome-newHomePanel reftarget title新鲜好物 sub-title新鲜出炉 品质靠谱/HomePanel/div
/template2优化人气推荐
script langts setup
const { home } useStore()
const target ref(null)
const { stop } useIntersectionObserver(target, ([{ isIntersecting }]) {console.log(isIntersecting)// isIntersecting 是否进入可视区域true是进入 false是移出if (isIntersecting) {home.getHotList()stop()}
})
/script
templateHomePanel reftarget title人气推荐 sub-title人气爆款 不容错过/HomePanel
/template给ref添加组件类型
参考链接:https://staging-cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs
!-- App.vue --
script setup langts
import MyModal from ./MyModal.vueconst modal refInstanceTypetypeof MyModal | null(null)const openModal () {modal.value?.open()
}
/script组件数据懒加载-封装 目标封装组件数据懒加载可复用的逻辑 分析 首页中很多地方都应该使用组件数据懒加载这个功能不管是哪个模块使用下面代码都会重复书写 事实上唯一可能会随着业务使用发生变化的是 ajax接口的调用 其余的部分我们进行重复使用抽离为可复用逻辑 核心代码
1封装通用的懒加载数据api src/utils/hooks.ts
// 自定义一些通用的compositions api
import { useIntersectionObserver } from vueuse/core
import { ref } from vue// 封装通用的数据懒加载api
export function useLazyData(apiFn: () void) {// 通过 ref 获得组件实例const target ref(null)const { stop } useIntersectionObserver(// target 是观察的目标dom容器必须是dom容器而且是vue3.0方式绑定的dom对象target,// isIntersecting 是否进入可视区域true是进入 false是移出// observerElement 被观察的dom([{ isIntersecting }]) {// 在此处可根据isIntersecting来判断然后做业务if (isIntersecting) {stop()apiFn()}})return target
}2优化新鲜好物
script langts setup
const target useLazyData(() {home.getNewList()
})
/script
templatediv classhome-newHomePanel reftarget title新鲜好物 sub-title新鲜出炉 品质靠谱/HomePanel/div
/template3优化人气推荐
script langts setup
const target useLazyData(() {home.getHotList()
})
/script
templateHomePanel reftarget title人气推荐 sub-title人气爆款 不容错过/HomePanel
/template拓展小知识自定义lazyhook的类型优化
export function useLazyApi(apiFn: () void) {const target refMaybeElementRef | null(null)const {stop} useIntersectionObserver(target, ([{isIntersecting}]) {if (isIntersecting) {stop()apiFn()}})return target
}添加了ref类型提示MaybeElementRef - 暴露出去的taget如果赋值类型不对会进行提示 看一下MaybeElementRef到底是什么类型
declare type MaybeElementRefT extends MaybeElement MaybeElement MaybeRefT;
declare type MaybeElement HTMLElement | SVGElement | VueInstance | undefined | null;
declare type MaybeRefT T | RefT;总结MaybeElementRef类型的类型为
MaybeElement的Ref类型或者直接为MayBeElement类型
首页主体-滚动加载商品的bug
产品区域需要滚动比较多才能去加载数据。threshold 容器和可视区交叉的占比进入的面积/容器完整面积 取值0-1 之间默认比0大所以需要滚动较多才能触发进入可视区域事件。 阈值 (进入的面积/容器完整面积)
const { stop } useIntersectionObserver(target,([{ isIntersecting }], observerElement) {if (isIntersecting) {stop()// 调用API获取数据apiFn().then(data {result.value data.result})}},{threshold: 0}
)
rElement) {if (isIntersecting) {stop()// 调用API获取数据apiFn().then(data {result.value data.result})}},{threshold: 0}
)
