如何实现数据懒加载

laughable045

于 2021-07-19 21:53:09 发布

阅读量851

点赞数 1

本文链接：https://blog.csdn.net/weixin_55633731/article/details/118915271

版权

本文详细介绍了如何使用vueuse的useIntersectionObserver方法来实现数据的懒加载。首先，文章讲解了useIntersectionObserver的基本原理，然后封装了通用的懒加载逻辑，并提供了组件的引入和使用方法，最后展示了如何指定需要进行懒加载的元素。

摘要由CSDN通过智能技术生成

1.了解useIntersectionObserver（）

这里用到了@vueuse/core 中的useIntersectionObserver（）

从vueuse的官网中学习跳转

 1. stop 是一个函数。如果调用它，就会停止观察
 2. target 是观察的目标容器 dom对象 | 组件对象
 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出
   const { stop } = useIntersectionObserver(
     target, // target 是vue的对象引用。是观察的目标
     // isIntersecting 是否进入可视区域，true是进入 false是移出
     // observerElement 被观察的dom
     ([{ isIntersecting }], observerElement) => {
       // 在此处可根据isIntersecting来判断，然后做业务
     },
    )

2.通用逻辑封装

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

const useLazyData = (fn) => {
  const target = ref(null)

  const { stop } = useIntersectionObserver(
    target, // target 要观察的目标
   
    ([{