本节目标:
从实际角度理解组件数据懒加载指的是什么
思考俩个问题
我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的,生命周期有一个特点:跟着组件的初始化过程走自动执行,开发者无法控制,所以我们现在首页中的人气推荐/新鲜好物等模块中的请求一旦组件渲染ajax请求就会发起,而电商类的首页页面一般会很长,有的模块组件甚至都不会出现在视口中,这样无脑的加载数据,显然是不合理的存在浪费,为了解决这个问题,我们引入了组件数组懒加载
结论(何为组件数据懒加载?)
只有组件正式进入到视口中时,才把组件内部的ajax请求发起,否则不请求数据
本节目标:
了解如何通过技术手段得知组件进入了视口
技术方案:
我们可以使用 @vueuse/core
中的 useIntersectionObserver
来实现监听组件进入可视区域行为,需要配合vue3.0的组合API的方式才能实现
useIntersectionObserver 链接地址
yarn add @vueuse/core
import { useIntersectionObserver } from '@vueuse/core'
useIntersectionObserver
函数:const { stop } = useIntersectionObserver( target, ([{ isIntersecting }], observerElement) => { targetIsVisible.value = isIntersecting }, ) /* 1.stop 一个可执行的函数用来停止监听行为 2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象 3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false */
HomePanel
是一个组件,使用时候替换成自己的组件即可
<HomePanel ref="target" ></HomePanel> <script> export default { name: 'HomeHot', components: { HomePanel }, setup () { // 存放数据的数组 const list = ref([]) // 请求数据函数 const getList = () => { const res = await findHot() list.value = res.data.result } // 获取的DOM节点 const target = ref(null) // stop 是一个可执行的方法 调用就会停止监听 // 不管元素进入还是离开视口区域都不会再执行回调函数 // 注意:不会只监听一次 只有进入视口或者离开视口回调函数都会执行 const { stop } = useIntersectionObserver( // target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象 target, // isIntersecting 是否进入可视区域,true是进入 false是移出 // observerElement 被观察的dom ([{ isIntersecting }], observerElement) => { // 在此处可根据isIntersecting来判断,然后做业务 if (isIntersecting) { // 停止监听防止重复调用接口 stop() console.log('正式发起接口请求') getList() } } ) return { target, goodsRef } } </script>
封装成函数
// 引入useIntersectionObserver import { useIntersectionObserver } from '@vueuse/core' import { ref } from 'vue' export const useObserver = apiFn => { // 获取的DOM节点 const target = ref(null) // stop 是一个可执行的方法 调用就会停止监听 // 不管元素进入还是离开视口区域都不会再执行回调函数 // 注意:不会只监听一次 只有进入视口或者离开视口回调函数都会执行 const { stop } = useIntersectionObserver( // // target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象 target, ([{ isIntersecting }], observerElement) => { /** * isIntersecting 是否进入可视区域,true是进入 false是移出 * observerElement 被观察的dom * 在此处可根据isIntersecting来判断,然后做业务 */ if (isIntersecting) { // 在这里发起Axios请求 apiFn() // 停止监听防止重复调用接口 stop() } } ) return target }
检测函数效果
<HomePanel ref="target" ></HomePanel> <script> // 引入函数 import { useObserver } from '@/compositions' export default { name: 'HomeHot', components: { HomePanel }, setup () { // 存放数据的数组 const list = ref([]) // 请求数据函数 const getList = () => { const res = await findHot() list.value = res.data.result } // 调用函数返回值 是获取的Dom节点 上面要用所以要return出去 const target = useObserver(getNewGoods) return { goods, target } } } </script>
上述代码基于原始的封装函数,能满足大多处业务逻辑实现