组件数据懒加载
使用场景和解决的问题
在页面很长时,位于底部的组件可能用户根本就不会到达,那这些组件的数据加载就是一种浪费
核心机制:
只有组件成功进入到视口区域 我们才发送ajax请求 (接管了由生命周期钩子函数发送的请求模式变成手动控制什么时候发起)
具体实现:
通过 vueuse/core 中的 useIntersectionObserver()
核心方法: useIntersectionObserver 帮助我们监听组件是否进入到视口区域
import { ref } from 'vue' // 引入监听懒加载的方法 import { useIntersectionObserver } from '@vueuse/core' // 封装监听函数 export function useObserve (apiFn) { const target = ref(null) // stop是一个可执行的函数 用来手动停止监听函数 // 不管元素进入还是离开视口区域都不会再执行回调函数 const { stop } = useIntersectionObserver( // 监听目标元素 target, ([{ isIntersecting }], observerElement) => { // isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false // observerElement 被观察的dom // console.log(isIntersecting) // 有了一个判断是否进入视口区域的条件 如果是true 代表进入了视口区域 发起请求 if (isIntersecting) { // 可能随着业务的不同 调用接口的方法也不同 apiFn() // 发送请求之后 立刻停止监听 stop() } // 监听处理不是只一次进行的 每次进入移除视口都会再次执行回调 所以需要手动关闭 }, // 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大 { threshold: 0 } ) return { target } }在mian.js中引入并且挂载到Vue的实例上
图片懒加载
使用场景
在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态
浏览器一般最多支持并行发送的请求数6个左右 避免和重要请求竞争
实现机制
监听图片是否成功进入到视口 如果进来了我们才正式发送请求 (操作src就可以)
具体实现
实现方法总结:
方法一:
通过滚动事件计算当前dom距离顶部的距离, 到达多少px发起请求 或 给img的src属性赋值, 这个方法需要通过大量的计算
方法二:
通过VueUse API库中的useIntersectionObserver()方法, 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现
代码实现:
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230100.html原文链接：https://javaforall.net
