做vue3项目中如何实现数据的懒加载

写在前面

目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下我们做vue3时如何实现数据的懒加载

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。

大致步骤：

• 理解 useIntersectionObserver 的使用，各个参数的含义
• 改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法
• 封装 useLazyData 函数，作为数据懒加载公用函数
• 把 home-new 和 home-hot 改造成懒加载方式

落地代码：

1. 先分析下这个useIntersectionObserver 函数：

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是true还是false来判断，然后做业务
    
  },
  
)

举个栗子

新建一个hook文件夹放置该方法

// 封装一个通用的方法实现数据的懒加载
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 }
}

来吧，试试看