vue3数据懒加载

目标：实现当组件进入可视区域在加载数据。

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

对某个板块进行数据懒加载，首先要获取到这个dom元素，然后用useIntersectionObserver来监听这个dom，一旦可视区进入了这个dom元素这里，就可以进行请求数据接口

安装@vueuse/core包,它封装了一些常见的交互逻辑

npm i @vueuse/[email protected]

步骤：

理解 useIntersectionObserver 的使用，各个参数的含义

封装 useLazyData 函数，作为数据懒加载公用函数

把 index.vue页面里数据改造成懒加载方式

页面准备：

src/hooks/index.js存放一些交互逻辑得函数

// 可以复用得工具函数
// 引入vueuse函数库
import { useIntersectionObserver } from '@vueuse/core' // 监听进入可视区
import { ref } from 'vue'
/**
 * 数据懒加载
 * @param {Element} target -Dom对象 （被监听的对象）
 * @param {Function} apiFn -API函数 （不同的api函数）
 */
// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
// isIntersecting 是否进入可视区域，true是进入 false是移出
// observerElement 被观察的dom
export const useLazyData = (target, apiFn) => {
  const result = ref([])//装着需要返回出去的数据
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) { // 如果进入了可视区 
        stop()//停止观察，因为不能一直触发
        apiFn().then(res => { // 调用api函数获取数据
          result.value = res.result
        })
      }
    }
  )
  return result//把结果返回出去
}

index.vue使用懒加载

<div ref="box">   可视区到了这里就要进行数据懒加载
      <p>{
    
    {result}}</p>
</div>

import { ref } from 'vue'
import { getData } from '@/api/home'  //获取数据的接口函数
import { useLazyData } from '@/hooks' //引入数据懒加载函数

export default {
  setup () {
     //未进行数据懒加载
    // const data = ref([])
    // getData().then(res => {
    //   data.value = res.result
    // })
    // 使用数据懒加载
    const box = ref(null)// 得到这个dom对象
    const result = useLazyData(box, getData)// 被监听的dom对象，需要请求的api函数
    //注意：useLazyData需要的是API函数，如果遇到要传参的情况，自己写函数在函数中调用API
    //const result = useLazyData(box, () => getData(10))
    return {  result, target }
  }
}

猜你喜欢