Vue3.0 组件数据懒加载

数据懒加载的好处是什么,我是这样理解的: 只有你看这部分内容的时候,我才去获取这部分的数据,再渲染上。只有当真正需要资源的时候，再去加载，节省内存资源。

如何判断一个dom元素是否进入了可见区域?

原生里面我们用的是获取dom的位置, 

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

vue3.0 使用 useIntersectionObserver来监听进入可视区域的行为

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)

在使用 useIntersectionObserver 时,记得 npm i  @vueuse/core  先装包!!

 这个是官网上的写法:(stop: 是一个函数,如果调用它,就会停止观察)

                                    observerElement 是被观察的dom

 如果数据懒加载你要多处使用,那么就可以把它封装成一个组件

src下新建一个文件,文件下新建一个index.js,代码如下,直接粘贴过去就可以啦!

当target 可见时,stop() 停止对它的观察,调用一次fn,这样就只会发一次请求。

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

/**
 * 功能: 数据懒加载
 *
 * @param {*} fn  当目标可见时，要调用一次的函数
 * @returns target: 要观察的目标（vue3的引用）
 */
const useLazyData = (fn) => {
  const target = ref(null)

  // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
  // 2. target 是观察的目标容器 dom对象 | 组件对象
  // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出
  const { stop } = useIntersectionObserver(
    target, // target 是vue的对象引用。是观察的目标
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) { // 目标可见，
        // 1. ajax可以发了，后续不需要观察了
        stop()
        // 2. 执行函数
        fn()
      }
    }
  )

  return target
}

export default useLazyData

 在你需要给它数据懒加载的页面上,导入这个组件

第一步:

import useLazyData from '@/xxxxx/index.js'    当然,index.js可以省略

第二步: 给你发请求拿数据包在fn函数里面

第三步:

第四步: 给你要操作的元素加引用

 四个步骤,数据的懒加载就完成啦

注意:useIntersectionObserver默认以进入视口的面积占总元素面积的0.1为基准判断是否进入

当滚动条没有到达视口面积的10%时,会出现上面变白的情况,那么,如何解决呢?

在使用userIntersectionObserver的补充一个参数设置,就可以解决啦

  const { stop } = useIntersectionObserver(
    container,
    ([{ isIntersecting }], dom) => {
      if (isIntersecting) {
        stop()
        fn()
      }
+    }, {
+      threshold: 0
+    }
  )

 threshold (进入的面积/容器完整面积） 取值，0-1 之间，默认是0.1