vue3——自己封装组件数据懒加载函数

269 阅读2分钟

前言

网页中使用懒加载数据是非常常见的场景之一,其可以提高网页的响应速度,也可以避免刚打开网页就加载所有资源的情况,可以给用户带来很好的体验。接下来跟着本文一起来看看如何实现组件数据的懒加载吧~


一、为什么需要组件数据懒加载?

刚打开网页用户可以看到的视口有限,加载出现在用户视口内的组件,未进入视口的不加载。

  • 网页加载速度提高,用户看哪一部分就加载哪一部分资源
  • 提高用户体验

二、如何实现组件数据懒加载?

1. 准备

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

官网:vueUse

:这里使用5.3.0版本,各位小伙伴根据自己情况选择。

项目根目录下打开任意终端执行npm i @vueuse/core@5.3.0

2. 分析

先分析下这个useIntersectionObserver 函数

代码如下(示例):

// const {stop} = useIntersectionObserver(target, fn, options)
// 1、参数一target表示被监听的DOM元素
// 2、参数二是回调函数,用于通知监听的动作(回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区)
// 3、表示配置选项
// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域,true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断,然后做业务
  },
)

3. 代码演示

代码示例(如下):

// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) => {
  // target表示组件的最外层div元素
  const target = ref(null)
  // 懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果target对应的DOM进入可视区,那么该回调函数就触发
    if (isIntersecting) {
      // 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听
      stop()
      apiFn().then(data => {
        result.value = data.result
      })
    }
  })
  // result表示接口懒加载获取的业务数据
  // target表示被监听的DOM元素,需要在模板中被ref属性绑定
  return { result, target }
}

三、如何使用?

在任意组件中,需要发送请求的时候使用封装好的懒加载函数即可。

setup函数返回的result可以直接在模板中使用。 代码示例(如下):

// 引入组件懒加载函数
import { useLazyData } from 'xxx/xxx.js'
// 引入发送请求的API
import { xxx } from 'xxx/xxx.js'

export default {
  name: 'APP',
  setup () {
    const { target, result} = useLazyData(findNew)

    return { result, target }
  }
}

总结

有用哦~快点赞收藏起来