优化项目--使用数据优化

数据懒加载

我们为什么要进行数据懒加载?

背景

就是当我们要访问的数据量过大时，明显用缓存不太合适，

因为内存容量有限 ，为了减少并发量，减少系统资源的消耗，

我们让数据在需要的时候才进行加载，这时我们就用到了懒加载

目标

实现组件进入可视区域后才去发送请求加载数据，没有进入可视区域时就先不发请求。

思路传统：获取DOM位置，手动判断。

传统：获取DOM位置，手动判断。 新方法: 判断当前模块是否可见，可见就发请求

做法

封装一个自定义的hooks，接收一个回调，返回一个ref。这个ref可以用在模块的外层dom上 ： 当这个ref引用的dom可见是，就执行这个回调（发请求）

借用vueuse, useIntersectionObserver去封装。（react生态中，有一个和vueuse类似的库： ahooks）

代码操作

1.封装一个组件

//  数据懒加载
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}]) =>{
      // 可见
      if(isIntersecting) {
        // 发请求
        fn()
        // 停止监听
        stop()
      }
    })
  })
  return target
}

2.在页面中使用

   //导入 
import { useLazyData } from '@/utils/hooks'; /
/ 在里面调用函数 
const target = useLazyData(()=>{ 
    home.getHotList() 
   }) 
   
  在加载的数据最外边的盒子中添加 ref="target"
    <div ref="target">
        要懒加载的内容
    </**div**>