如何在Vue3中实现数据懒加载.

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

// 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 userLazyData = (fn) => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    // 监听的回调函数
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop()

        fn && fn()
      }
    }
  )
  return target
}