vue3复用数据懒加载

1. 借用插件

@vueuse/core

插件的底层原理用到了h5中的# IntersectionObserver()

详情请看：IntersectionObserver

npm i @vueuse/core

2. 引用插件

import { useIntersectionObserver } from '@vueuse/core'

3.使用

<template>
    <div ref="target"></div>
</template>

<script>
    export default{
        setup(){
           const target = ref(null) // 把目标引用
           const { stop } = useIntersectionObserver(
              target, // target 是vue的对象引用。是观察的目标
              // isIntersecting 是否进入可视区域，true是进入 false是移出
              // observerElement 被观察的dom
              ([{ isIntersecting }], observerElement) => {
                // 在此处可根据isIntersecting来判断（判断dom元素是否在可是区域内），然后做业务
                if (isIntersecting) {
                  // 1. 停止观察
                  stop()
                  // 2. 发一次请求
                  //发送ajax
                }
              }
            )

            return { list, target }
        }
    }
</script>

4. 对数据懒加载进行封装

这里将此文件放入compositions/index.js中

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

/**
 * 功能：数据的懒加载
 * @param {*} fn 当目标可见时，需要调用一次函数
 * @returns target：要观察的目标元素（dom元素）
 */
export function useLazyData (fn) {
  const target = ref(null) // 把目标引用
  const { stop } = useIntersectionObserver(
    target, // target 是vue的对象引用。是观察的目标
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        // 1. 停止观察
        stop()
        // 2. 发一次请求
        fn()
      }
    },
    // threshold为可视区域的比值，默认为1/10
    // 当前元素在页面中显示比值小于1/10时会出现白屏
    { threshold: 0 }
  )
  return target
}

5. 使用封装好的数据懒加载

<template>
    <div ref="target"></div>
</template>

import { useLazyData } from '@/compositions/index.js'
<script>
setup () {
    const goods = ref([])
    const fn = () => {
      //业务代码（请求数据）
    }
    const target = useLazyData(fn)

    return { goods, target }
  }
</script>

6. 效果图