前端性能优化之数据懒加载

上篇文章介绍了图片懒加载,那在性能优化上 数据懒加载也是非常有必要的

原因: 还是以电商类网站为例，尤其是首页，内容有好几屏，而如果一上来就加载所有屏的数据，并渲染所有屏的内容会导致首页加载很慢。这样用户体验就不是很好了

那么 如何结局这个问题呢?

这时候数据懒加载就起到作用了~

原理 :

数据懒加载就是等组件正式进入到可视区中时，才把组件内部的ajax请求发起，否则不请求数据

安装

@vueuse/core 函数库，它封装了常见的一些交互逻辑

npm i @vueuse/core
yarn add @vueuse/core

项目中，很多地方都应该使用组件数据懒加载这个功能，不管是哪个模块使用，唯一可能会随着业务使用发生变化的是 ajax接口的调用

其余的部分我们进行重复使用，抽离为可复用逻辑,因此 我们可以封装通用的懒加载数据api

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
}

最后, 直接引用即可

const target = useLazyData(() => {
  // 发请求
  home.getGoodsList()
})