本篇文章记录的是， 在 vue 项目中使用第三方库 VueUse 中的 intersectionobserver 这个hooks来实现数据懒加载。
一、背景
在日常开发工作中，有时候我们会遇到需要加载显示很多不同数据的页面，如果不做任何处理，那一进入页面就会开始疯狂调各种接口去获取相应的数据，显然这种一次性加载的方式会降低性能，减缓加载速度，从而影响用户体验。所以我们需要进行数据懒加载的优化处理，实现的思路是当组件进入到可视范围的时候才去调接口请求数据。
二、关于 useIntersectionObserver hooks
它的作用是检测目标元素的可见性。官方文档
/**
* Detects that a target element's visibility.
*
* @see https://vueuse.org/useIntersectionObserver
* @param target
* @param callback
* @param options
*/
export declare function useIntersectionObserver(
target: MaybeElementRef,
callback: IntersectionObserverCallback,
options?: UseIntersectionObserverOptions
): {
isSupported: Ref<boolean>
stop: () => void
}
三、具体使用
1、安装工具库
npm i @vueuse/core
or
yarn add @vueuse/core
2、代码
① template部分
为想要检查的元素提供一个模板ref： ref="target"
<template>
<v-audit ref="target" >
<slot name="contentInfo"></slot>
</v-audit>
</template>
② script部分
导入钩子函数并使用
<script>
import { defineComponent, ref } from "@vue/composition-api";
import { useIntersectionObserver } from '@vueuse/core'
export default defineComponent({
setup (props, { emit }) {
const target = ref(null)
const { stop } = useIntersectionObserver(
target, // 被监听的元素
([{ isIntersecting }]) => {
// 元素是否进入了可视范围
if(isIntersecting) {
stop() // 停止监听
do something… // 具体的业务逻辑
}
},
)
return { ...toRefs(state), target};
},
});
</script>
OK，此时我们的优化工作就做完了。那就休息一下吧~
