Vue3的组件数据懒加载

目的： 实现当组件进入可视区域在加载数据。

我们可以使用 @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>

这样的话用户就可以在滑到相应区域的时候再发送请求获取数据了。