【new IntersectionObserver】vue3 数据懒加载

本文主要是介绍【new IntersectionObserver】vue3 数据懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

new IntersectionObserver js方法描述步骤
实现逻辑：通过监视底部节点可视情况，获取新数据进行渲染，如果获取不到最新数据则显示暂无其他数据

new IntersectionObserver 是用于监视元素可见度，所以我们只需要监视数据下方的dom是否可见

import { type Ref, watchEffect, ref } from "vue"//我用的ts，不需要可以删除
interface IntersectionObserverProps {target: Ref<Element | null | undefined>root?: Ref<any>onIntersect: IntersectionObserverCallbackrootMargin?: stringthreshold?: number | number[]
}export function useIntersectionObserver({ target, root, onIntersect, rootMargin = "0px", threshold = 0.1 }: IntersectionObserverProps) {let cleanup: Function//每次调用前先移除监听const observer: Ref<Nullable<IntersectionObserver>> = ref(null)const stopEffect = watchEffect(() => {cleanup && cleanup()observer.value = new IntersectionObserver(onIntersect, {root: root ? root.value : null,//设置监视器的根节点，不传则默认为视口rootMargin,//类似于 CSS 的 margin 属性。用来缩小或扩大 rootBounds，从而影响相交的触发。threshold/*属性决定相交比例为多少时，触发回调函数。取值为 0 ~ 1，或者 0 ~ 1的数组。当我们把  threshold 设置为 [0, 0.25, 0.5, 0.75, 1]，元素分别在 0%，25%，50%，75%，100% 可见时，触发回调函数。*/})const current = target.value//被监视的元素本身current && observer.value.observe(current)// 开始观察某个目标元素cleanup = () => {if (observer.value) {observer.value.disconnect()// 关闭监视器target.value && observer.value.unobserve(target.value)// 停止观察某个目标元素}}})//将方法暴露出来外部也可使用return {observer,stop: () => {cleanup()stopEffect()}}
}

不清楚方法配置项的可以看MDN Intersection Observer
组件中使用
将暂无其他数据的dom给到方法去监视

这里我只是简单演示方法，监视效果达后到可以自行更改ui和触底后的逻辑
html:

<div v-for='item in data' key='item' >{{item}}</div>
<div  ref="empty">{{"暂无其他数据" }}</div>

js部分

const empty = ref(null)
// 默认在初始创建节点时会触发一次，因为初始没有数据节点会在视图中完整呈现，也可以让节点在有数据的时候再创建
const { stop, observer } = useIntersectionObserver({target: empty,//最底部的domonIntersect: (entries: any[]) => {//isIntersecting：boolean 表示节点是否可见，intersectionRatio：number 表示节点可见度数值const isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatioif (!isIntersecting) return... //此处写要实现的逻辑},threshold: 0.1//为1 表示dom完整呈现
})

如果需要详细讲解可以看这两篇文章：

https://juejin.cn/post/6844903927419256846
https://juejin.cn/post/6950464500491354126#heading-9

也可以去MDN Intersection Observer 查看完整配置项和方法

vue基于组合式API提供的@vueuse/core插件内的useIntersectionObserver
安装
npm i @vueuse/core

使用
useIntersectionObserver其实就是方便了我们之前封装的那个步骤，如果想要基于这个二次封装也是可以的

// 封装一个通用的方法实现数据的懒加载
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()... //此处写要实现的逻辑}})// result表示接口懒加载获取的业务数据// target表示被监听的DOM元素，需要在模板中被ref属性绑定return { result, target }
}