目标:实现当组件进入可视区域在加载数据。
使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为,但是必须配合vue3.0的组合API的方式才能实现。
对某个板块进行数据懒加载,首先要获取到这个dom元素,然后用useIntersectionObserver来监听这个dom,一旦可视区进入了这个dom元素这里,就可以进行请求数据接口
安装@vueuse/core包,它封装了一些常见的交互逻辑
npm i @vueuse/[email protected]
步骤:
理解 useIntersectionObserver 的使用,各个参数的含义
封装 useLazyData 函数,作为数据懒加载公用函数
把 index.vue页面里数据改造成懒加载方式
页面准备:
src/hooks/index.js存放一些交互逻辑得函数
// 可以复用得工具函数
// 引入vueuse函数库
import { useIntersectionObserver } from '@vueuse/core' // 监听进入可视区
import { ref } from 'vue'
/**
* 数据懒加载
* @param {Element} target -Dom对象 (被监听的对象)
* @param {Function} apiFn -API函数 (不同的api函数)
*/
// target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象
// isIntersecting 是否进入可视区域,true是进入 false是移出
// observerElement 被观察的dom
export const useLazyData = (target, apiFn) => {
const result = ref([])//装着需要返回出去的数据
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
// 在此处可根据isIntersecting来判断,然后做业务
if (isIntersecting) { // 如果进入了可视区
stop()//停止观察,因为不能一直触发
apiFn().then(res => { // 调用api函数获取数据
result.value = res.result
})
}
}
)
return result//把结果返回出去
}
index.vue使用懒加载
<div ref="box"> 可视区到了这里就要进行数据懒加载
<p>{
{result}}</p>
</div>
import { ref } from 'vue'
import { getData } from '@/api/home' //获取数据的接口函数
import { useLazyData } from '@/hooks' //引入数据懒加载函数
export default {
setup () {
//未进行数据懒加载
// const data = ref([])
// getData().then(res => {
// data.value = res.result
// })
// 使用数据懒加载
const box = ref(null)// 得到这个dom对象
const result = useLazyData(box, getData)// 被监听的dom对象,需要请求的api函数
//注意:useLazyData需要的是API函数,如果遇到要传参的情况,自己写函数在函数中调用API
//const result = useLazyData(box, () => getData(10))
return { result, target }
}
}