Vue3懒加载实践-CSDN博客

本文链接：https://blog.csdn.net/qq_46034942/article/details/124998532

本文介绍如何使用Vue3结合@vueuse/core中的useIntersectionObserver实现懒加载功能，以提升页面性能并减少不必要的请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒加载可以更好的提高计算机性能，同时减少不必要的请求次数。我写的是Vue3的一个简单案例，这里有官网。

1.官网：useIntersectionObserver | VueUsehttps://vueuse.org/core/useIntersectionObserver/

2.通过使用 @vueuse/core 的 useIntersectionObserver 来实现监听组件是否进入可视区

（1）引入

import { useIntersectionObserver } from '@vueuse/core'

（2）使用

在组件中绑定 ref ，便于在 setup 中获取该元素

<HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱" ref="target" />

stop 一个可执行的函数用来停止监听行为；

target 一个由ref api调用之后形成的 RefImpl 对象也可以是一个dom对象；

isIntersecting 一个类型为布尔值的数据当被监听元素进入视口区域时为 true ,离开视口区域时为 false；

特别注意: 对于目标target是qingqiu口区域的监听会一直进行不会只监听一次，所以当我们在 isIntersecting 为 true 的时候发送请求之后，需要停止监听，添加 stop()

// 通过 ref 获得组件实例
    const target = ref(null)
    const { stop } = useIntersectionObserver(
      // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
      target,
      // isIntersecting 是否进入可视区域，true是进入 false是移出
      // observerElement 被观察的dom
      ([{ isIntersecting }], observerElement) => {
        // 在此处可根据isIntersecting来判断，然后做业务
        console.log(isIntersecting)
        if (isIntersecting) {
          // 调用发请求方法
          // ........
          // 停止监听
          stop()
        }
      }
    )