Vue懒加载实现

组件数据懒加载

使用场景和解决的问题

在页面很长时,位于底部的组件可能用户根本就不会到达,那这些组件的数据加载就是一种浪费

核心机制:

        只有组件成功进入到视口区域  我们才发送ajax请求  (接管了由生命周期钩子函数发送的请求模式变成手动控制什么时候发起)

具体实现:

通过 vueuse/core 中的 useIntersectionObserver()

核心方法: useIntersectionObserver 帮助我们监听组件是否进入到视口区域

import { ref } from 'vue'
// 引入监听懒加载的方法
import { useIntersectionObserver } from '@vueuse/core'

// 封装监听函数
export function useObserve (apiFn) {
  const target = ref(null)
  // stop是一个可执行的函数 用来手动停止监听函数
  // 不管元素进入还是离开视口区域都不会再执行回调函数
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false
      // observerElement 被观察的dom
      // console.log(isIntersectin