1. 理解组件数据懒加载
思考俩个问题
- 我们一般的数据请求在哪里发起？ mounted created
- 生命周期钩子函数的特点是什么？ 时机到了自动执行
我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的，生命周期有一个特点：跟着组件的初始化过程走自动执行，开发者无法控制，所以我们现在首页中的人气推荐/新鲜好物等模块中的请求一旦组件渲染ajax请求就会发起，而电商类的首页页面一般会很长，有的模块组件甚至都不会出现在视口中，这样无脑的加载数据，显然是不合理的存在浪费，为了解决这个问题，我们引入了组件数组懒加载
结论（什么是组件数据懒加载？）
只有组件正式进入到视口中时，才把组件内部的ajax请求发起，否则不请求数据
2. 如何判断组件进入视口
任务目标: 了解如何通过技术手段得知组件进入了视口
技术方案：
我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现
vueuse.org/core/useInt…
先分析下这个useIntersectionObserver 函数：
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
}
)
/*
1.stop 一个可执行的函数用来停止监听行为
2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/
1）通过ref属性获得组件实例
<template>
<!-- 和模板关联 -->
<HomePanel ref="hotRef" >
...
</HomePanel>
</template>
<script>
export default {
name: 'HomeHot',
components: { HomePanel },
setup () {
// 1.定义要监听的目标dom容器
const targetRef = ref(null)
onMounted(() => {
console.log(hotRef)
})
// 2.return出去
return {
targetRef
}
},
data () {
return {
goods: []
}
},
async created () {
const data = await findHot()
this.goods = data.result
}
}
</script>
2）使用useIntersectionObserver监听函数
export default {
name: 'HomeHot',
components: { HomePanel },
setup () {
const targetRef = ref(null)
onMounted(() => {
console.log(targetRef)
})
useIntersectionObserver(
// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
targetRef,
// isIntersecting 是否进入可视区域，true是进入 false是移出
// observerElement 被观察的dom
([{ isIntersecting }], observerElement) => {
// 在此处可根据isIntersecting来判断，然后做业务
console.log(isIntersecting)
}
)
return {
targetRef
}
}
}
3. 具体业务实现
实现步骤
- 把先前在onMouted钩子里发送的ajax请求在
isIntersecting为true时触发 - 一旦触发一次之后停止监听，防止接口重复调用
<HomePanel ref="target"></HomePanel>
export default {
name: 'HomeHot',
components: { HomePanel },
setup () {
const list = ref([])
async function getList () {
const res = await findHot()
list.value = res.data.result
}
const target = ref(null)
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
}
}
4. 组件数据懒加载逻辑复用
抽离通用逻辑
1）抽离逻辑
compositions/index.js
// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserver (apiFn) {
// 监听的目标对象
const target = ref(null)
// stop 是一个可执行的方法 调用就会停止监听
// 不管元素进入还是离开视口区域都不会再执行回调函数
// 注意：不会只监听一次 只有进入视口或者离开视口回调函数都会执行
const { stop } = useIntersectionObserver(
// 监听目标元素
target,
([{ isIntersecting }], observerElement) => {
// isIntersecting 布尔值 代表当前监听的元素是否进入视口区域
console.log(isIntersecting)
// ...判断 一旦为true 就发送ajax
if (isIntersecting) {
// 发起网络请求
apiFn()
// 请求数据完毕停止监听
stop()
}
}
)
return {
target
}
}
2）业务改写
<script>
import HomePanel from './home-panel'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import { useObserver } from '@/compositions'
export default {
name: 'HomeHot',
components: { HomePanel },
setup () {
const list = ref([])
async function getList () {
const res = await findHot()
list.value = res.data.result
}
const { target } = useObserver(getList)
return {
list,
target
}
}
}
</script>
