vue3.0实现数据懒加载

数据懒加载：即当组件进入可视区域之后，再向后台发请求获取数据。

实现方式：使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为

思路：

• 理解 useIntersectionObserver 的使用，各个参数的含义
• 封装一个数据懒加载的方法 useLazyData 函数（参数target和apiFn）,作为数据懒加载公用函数

代码实现

1.useIntersectionObserver函数的定义 可参考@vueuse/core库中该函数的使用

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
  },
)

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData = (target, apiFn) => {
  // console.log("apiFn", apiFn);
    const result = ref([])
    //stop 停止观察
    const { stop } = useIntersectionObserver(
      //target 监听的目标对象 --dom
      target,
      ([{ isIntersecting }], observerElement) => {
        //isIntersecting 是否进入可视区
        if (isIntersecting) {
        //进入可视区 体质观察
          stop();
          // 调用API获取数据
          apiFn().then((data) => {
            result.value = data.result;
          });
        }
      },
      { threshold: 0 }
    );
    // 返回的数据--后台请求的数据
    return result
}

调用： 例如

const target = ref(null) //target为绑定的ref的dom

const result = useLazyData(target,find) //find 是一个请求后台返回promise的api函数

最后直接拿返回的result数据渲染页面即可