理解组件数据懒加载
如何判断组件进入视口
使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为,需要配合vue3.0的组合API的方式才能实现
分析 useIntersectionObserver 函数
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
}
)
/*
1.stop 一个可执行的函数用来停止监听行为
2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/
具体业务实现
<HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过"></HomePanel>
export default {
name: 'HomeHot',
components: { HomePanel },
setup () {
const list = ref([])
async function getList () {
const res = await findHot()
list.value = res.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
}
}
打开浏览器,模块还未进入到视口,打印值为false,然后我们滑动页面,当组件进入视口中时,再次发生打印,此时为true,到此我们就可以判断组件进入和移除视口了
**特别注意⚠️:**每次被监听的dom进入移出视口时都会触发一次,而不是只触发一次
组件数据懒加载逻辑复用(抽离出来,重复使用)
1)抽离逻辑 ---------------- `src/hooks/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) {
// 关闭监控是否进入视口
stop()
// 发起网络请求
apiFn()
}
}
)
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>