数据懒加载

既然有图片懒加载,那么自然而然的就有数据懒加载

数据懒加载

首页中，很多地方都应该使用组件数据懒加载这个功能，不管是哪个模块使用，下面代码都会重复书写

事实上，唯一可能会随着业务使用发生变化的是 ajax接口的调用

其余的部分我们进行重复使用，抽离为可复用逻辑

src/utils/hooks.ts

import { useIntersectionObserver } from '@vueuse/core';
import { onMounted, ref } from 'vue';

// 接收一个回调函数，返回一个ref引用
// 功能：当ref引用的dom处于可见状态时，调用一次回调函数
export function useLazyData( fn: () => void ){
  const target = ref(null)
  // 当整个区块处于可见状态时，才发ajax
  onMounted(() => {
    const { stop } = useIntersectionObserver(target.value, ([{ isIntersecting }]) => {
      console.log('新鲜好物', isIntersecting)
      // 可见
      if(isIntersecting) {
        // 发请求
        fn()

        // 停止监听
        stop()
      }
    })
  })
  return target
}

注解

  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom


([{ isIntersecting }]) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        stop()
        .....

src/views/Home/components/HomeNo.vue

import { useLazyData } from '@/utils/hooks';

const { home }  = useStore()
// 发请求
home.getHotList()

// const list = ref([])

// const  getData = async () => {

//   const res = await home.xxxx()
//   list.value = res
// }

// getData()
const target = useLazyData(()=>{
  home.getHotList()
})

在template  组件外层套个 <div ref="target"></div>

其他页面要使用的话

就先导入

import { useLazyData } from '@/utils/hooks';

其次   home.xxx() 发送请求

const target = useLazyData(() => {
  home.getNewList()
})

最后一步

在 组件外面套层

<div ref="target"> </div>

组件数据懒加载是进入到可视区才开始加载数据，如果用户滚动过快，数据还没加载回来，会有白屏的效果，因此需要使用骨架屏组件进行优化