目的: 实现当组件进入可视区域在加载数据。
我们可以使用 @vueuse/core
中的 useIntersectionObserver
来实现监听进入可视区域行为,但是必须配合vue3.0的组合API的方式才能实现。
首先我们封装一个数据懒加载函数:
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
* 数据懒加载函数
* @param {Function} apiFn - Api函数
* @constructor
*/
export const useLazyData = (apiFn) => {
const target = ref(null)
const result = ref([])
// stop 停止观察
const { stop } = useIntersectionObserver(
// 监听的目标函数
target,
([{ isIntersecting }], observeElement) => {
// isIntersecting是否进入可视区
if (isIntersecting) {
stop()
// 调用API函数获取数据
apiFn().then(data => {
result.value = data.result
})
}
}
)
return { result, target }
}
然后我们就可以在需要使用组件数据懒加载的地方使用。
<div ref="target">
<!-- 面板内容 -->
<ul>
<li v-for="item in goods" :key="item.id">
<img :src="item.picture" alt="">
<p>{{ item.name }}</p>
<p>{{ item.price }}</p>
</li>
</ul>
</div>
没有使用组件懒加载的写法:
<script setup>
import { ref } from 'vue'
import { findNew } from '@/api/home'
import { useLazyData } from '@/hooks'
const goods = ref([])
findNew().then(data => {
goods.value = data.result
})
</script>
使用组件懒加载的写法:
<script setup>
import { findNew } from '@/api/home'
import { useLazyData } from '@/hooks'
const { result: goods, target } = useLazyData(findNew)
</script>
这样的话用户就可以在滑到相应区域的时候再发送请求获取数据了。