vue 第三方方法 useIntersectionObserver 实现数据懒加载
在开发网站的时候，有时候一个页面的数据会很多，一次性加载会降低性能，加载速度缓慢，其实只要让可视窗口里面的数据加载即可，当页面部分内容还没有进入可视区域的时候，可以先不用加载数据，一旦进入可视区域通过事件监听元素位置进而选择数据加载的时机，这样做的好处就在于可以增强性能，避免没有必要的请求
首页主体
目的:实现当组件进入可视区在数据加载
我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。
大致步骤：
- 理解 useIntersectionObserver 的使用，各个参数的含义
- 改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法
- 封装 useLazyData 函数，作为数据懒加载公用函数
- 把 home-new 和 home-hot 改造成懒加载方式
首先先下载包：
npm i @vueuse/core
落地代码：
- 先分析一下这个
useintersectionObserver函数
// const {stop} = useIntersectionObserver(target, fn, options)
// 1、参数一target表示被监听的DOM元素
// 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）
// 3、表示配置选项
// stop 是停止观察是否进入或移出可视区域的行为
const { stop } = useIntersectionObserver(
// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
target,
// isIntersecting 是否进入可视区域，true是进入 false是移出
// observerElement 被观察的dom
([{ isIntersecting }], observerElement) => {
// 在此处可根据isIntersecting来判断，然后做业务
},
)
- 开始改造
home-new组件：rc/views/home/components/home-new.vue
进入可视区后获取数据：
<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 target = ref(null)
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }]) => {
if (isIntersecting) {
stop()
findNew().then(data => {
goods.value = data.result
})
}
}
)
return { goods, target }
}
}
</script>
总结：监听DOM元素进入可视区，进入后停止监听，并且调用接口获取数据
- 加载都需要实现懒数据加载，所以封装一个钩子函数，得到数据。src/hook/index.js
// 封装一个通用的方法实现数据的懒加载
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
})
}
}, {
//threshold 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。
threshold: 0
}
)
// 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: goods } = useLazyData(findNew)
return { goods, target }
}
}
<div ref="target" style="position: relative;height: 426px;">
