前言
我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的,生命周期有一个特点:跟着组件的初始化过程走自动执行,开发者无法控制,而电商类的首页页面一般会很长,有的模块组件甚至都不会出现在视口中,这样无脑的加载数据,显然是不合理的存在浪费,为了解决这个问题,我们引入了组件数组懒加载
提示:以下是本篇文章正文内容,下面案例可供参考
一、何为组件数据懒加载? ?
有组件正式进入到视口中时,才把组件内部的ajax请求发起,否则不请求数据 。
优点
-
提高页面渲染性能
-
减轻了服务器的压力
二、判断组件进入视口
1.我们可以使用 @vueuse/core
中的 useIntersectionObserver
来实现监听组件进入可视区域行为,需要配合vue3.0的组合API的方式才能实现
先分析下这个
useIntersectionObserver
函数:
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {