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 来判断,而后做业务},
)
业务性能场景
基于该办法实现组件的懒加载
第一步: 在 SRC 下封装一个钩子函数,src/hooks/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})
}
})
// result 示意接口懒加载获取的业务数据
// target 示意被监听的 DOM 元素,须要在模板中被 ref 属性绑定
return {result, target}
}
第二步: 在所须要的文件夹中导入
例如:
懒加载的益处: 页面加载速度快、能够加重服务器的压力、节约了流量, 用户体验好