原理和图片懒加载差不多,所要解决的问题也和图片懒加载差不多,这里就不多说
目的是实现当组件进入可视区域再加载数据。
这里使用 @vueuse/core 中 useIntersectionObserver 函数来实现监听进入可视区域的范围,但必须配合vue3.0的组合API方式来实现
可以先看下面这篇文章了解下IntersectionObserver
图片懒加载,原理你可一定要会_果冻OoO的博客-CSDN博客
大致步骤:
- 理解
useIntersectionObserver
的使用,各个参数的含义 - 改造 home-new 组件成为数据懒加载,掌握
useIntersectionObserver
函数的用法 - 封装
useLazyData
函数,作为数据懒加载公用函数 - 把
home-new
和home-hot
改造成懒加载方式
(一)先分析下这个useIntersectionObserver
函数
// stop 是停止观察是否进入或移出可视区域的行为
const { stop } = useIntersectionObserver(
// target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象
target,
// isIntersecting 是否进入可视区域,true是进入 false是移出
// observerElement 被观察的dom
([{ isIntersecting }], observerElement) => {
// 在此处可根据isIntersecting来判断,然后做业务
},
)
(二)掌握 useIntersectionObserver
函数的用法
<div ref="box" style="position: relative;height: 406px;">
// 省略。。。
<script>
import HomePanel from './home-panel'
import HomeSkeleton from './home-skeleton'
import { findNew } from '@/api/home'
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
name: 'HomeNew',
components: { HomePanel, HomeSkeleton },
setup () {
const goods = ref([])
const box = ref(null)
const { stop } = useIntersectionObserver(
box,
([{ isIntersecting }]) => {
if (isIntersecting) {
stop()
findNew().then(data => {
goods.value = data.result
})
}
}
)
return { goods, box }
}
}
</script>
(三) 封装 useLazyData
函数,作为数据懒加载公用函数
// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (apiFn) => {
// target表示组件的最外层div元素
const target = ref(null)
// 懒加载接口返回的数据
const result = ref([])
// 监听组件是否进入可视区
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
// 如果target对应的DOM进入可视区,那么该回调函数就触发
if (isIntersecting) {
// 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听
stop()
apiFn().then(data => {
result.value = data.result
})
}
})
// result表示接口懒加载获取的业务数据
// target表示被监听的DOM元素,需要在模板中被ref属性绑定
return { result, target }
}
(四)怎么用呢
再次改造 home-new
组件:rc/views/home/components/home-new.vue 比前面简洁多了
import { findNew } from '@/api/home'
+import { useLazyData } from '@/hooks'
export default {
name: 'HomeNew',
components: { HomePanel, HomeSkeleton },
setup () {
+ const { target, result } = useLazyData(findNew)
+ return { goods: result, target }
}
}