vue3 - (数据懒加载)监听元素是否进入可视区域

最新推荐文章于 2024-09-04 10:34:55 发布

Yolo416

最新推荐文章于 2024-09-04 10:34:55 发布

阅读量3.3k

点赞数 1

分类专栏： vue 文章标签： vue3

本文链接：https://blog.csdn.net/m0_50125215/article/details/119682904

版权

本文介绍了如何在Vue3中利用@vueuse/core的useIntersectionObserver实现组件数据的懒加载。通过理解该观察器的使用并结合Vue3的组合API，可以创建一个名为useLazyData的公用函数，确保组件进入可视区域时才加载数据。文中提供了简单的代码案例和封装懒加载组件的方法。

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

组件数据懒加载

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

大致步骤：

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

先分析下这个useIntersectionObserver 函数：

// stop 是停止观察是否进入或移出可视区域的行为    
const {
    stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{
     isIntersecting }], observerElement) => {

最低0.47元/天解锁文章