数据懒加载的好处是什么,我是这样理解的: 只有你看这部分内容的时候,我才去获取这部分的数据,再渲染上。只有当真正需要资源的时候,再去加载,节省内存资源。
如何判断一个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)
这个是官网上的写法:(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函数里面
第三步:
第四步: 给你要操作的元素加引用
四个步骤,数据的懒加载就完成啦