使用Vueuse在Vue3项目中进行图片懒加载

最新推荐文章于 2024-10-02 15:18:09 发布

mr.ocean

最新推荐文章于 2024-10-02 15:18:09 发布

阅读量905

点赞数

文章标签： javascript vue 前端框架

本文链接：https://blog.csdn.net/qq_45020131/article/details/123272312

版权

本文介绍了如何利用 VueUse 的 useIntersectionObserver 函数实现数据的懒加载，以提升网页性能。当元素进入视口时才发起请求，避免初次加载时数据量过大导致的延迟。首先展示基础代码，然后封装了一个 useLazyData 钩子函数，最后展示了在组件中如何使用这个钩子来实现人气推荐列表的懒加载。

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

首先使用npm导入库

npm i @vueuse/core

思路：
当浏览器页面滚动进入可视区域后，发起请求获取数据，防止刚进入页面时请求数据量过大引起数据资源加载慢的问题。

这里使用的是vueuse中的useIntersectionObserver函数，看不懂的可以去官网查看一下，vueuse官网
官网代码:

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

export default {
  setup() {
  // 当前的元素对象
    const target = ref(null)
    // 判断是否进入可视区
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
      // 通过isIntersecting值来判断是否发起请求
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}

在上面的基础下，我们自己封装一个钩子

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 * 数据懒加载函数
 * @param {Element} target - Dom对象
 * @param {Function} apiFn - API函数
 */
export const useLazyData = (target, apiFn) => {
  const result = ref([])
  // stop 停止观察
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isintersecting 是否进入可视区
      if (isIntersecting) {
        stop()
        // 调用API函数
        apiFn().then((data) => {
          result.value = data.result
        })
      }
    }
  )
  return result
}

使用的方式很简单，在其他组件中调用即可

<!-- 获取的元素对象 -->
 <div ref="target"></div>

// 导入
import { useLazyData } from '@/hooks'
setup() {
    // 人气推荐列表
    const goods = ref([])
    // findHot().then((data) => {
    //   goods.value = data.result
    // })
    const target = ref(null)
    const list = useLazyData(target, findHot)

    return { goods: list, target }
  },