©2020-2024 ioDraw All rights reserved,
Privacy Policy
数据懒加载（vueuse）:
实现当组件进入可视区域再加载数据。
使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为
步骤：
*
理解 useIntersectionObserver 的使用，各个参数的含义
*
掌握 useIntersectionObserver 函数的用法
*
封装 useLazyData 函数，作为数据懒加载公用函数
分析下这个useIntersectionObserver 函数：
// stop 是停止观察是否进入或移出可视区域的行为 const { stop } = useIntersectionObserver( //
target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象 target, // isIntersecting
是否进入可视区域，true是进入 false是移出 // observerElement 被观察的dom ([{ isIntersecting }],
observerElement) => { // 在此处可根据isIntersecting来判断，然后做业务 }, )
封装一个钩子函数：
// hooks 封装逻辑，提供响应式数据。 import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue' /** * 数据懒加载函数 * @param {Element} target -Dom对象 监听对象
* @param {Function} apiFn -API函数 监听完发请求拿数据 */ // 数据懒加载函数 export const
useLazyData = (target, apiFn) => { const result = ref([]) // stop 停止观察
const { stop } = useIntersectionObserver( // 监听的目标元素 target,
([{ isIntersecting }], observerElement) => { // isIntersecting
是否进入可视区 if (isIntersecting) { stop()
// 调用传进来的api函数 获取数据 apiFn().then(data => {
result.value = data.result }) } }, //
threshold: 0 只要dom盒子与可视区相交就触发加载数据 { threshold: 0.05 }
) //得到数据 将来直接使用就行了 return result }
使用：
<!-- 当div进入可视区 数据开始加载--> <template> <div ref="target"> <li v-for="item in
goods" :key="item.id"> .... </li> </div> </template> <script> //导入
import { useLazyData } from "@/hooks"; export default { setup() { //没有数据懒加载时
// const goods = ref([]); // findNew().then((data) => { //
goods.value = data.result; // }); //数据懒加载时 // 数据将来不知道是什么类型
ref(null) // 使用方法： // 1.target 去绑定一个监听对象，最好是DOM //
2.传入API函数，内部获取调用，返回的就是响应式数据 const target = ref(null) const reslut =
useLazyData(target,findNew); return { goods: reslut, target }; } } </script>