【vue中实现数据懒加载（vueuse）-------实现当组件进入可视区域再加载数据】

数据懒加载（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>