项目优化,图片和组件数据懒加载

一. 图片懒加载 

1.图片懒加载: 等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片

语法:

import { useIntersectionObserver } from '@vueuse/core'

// 实时监听这个dom是否在可视区内
// const { stop } = useIntersectionObserver(要监视的dom, ([{ isIntersecting }]) => {
//    // 回调函数: 当 isIntersecting 变化时：从可见->不可见； 不可见->可见
//    isIntersecting: 当前是否可见？ 类型为true/false
// })

// stop: 停止监听

封装自定义指令v-lazy,实现图片懒加载

import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app: App) {
    // 全局注册组件

    // 自定义指令
    // <img :src="item.src" alt="" />
    // <img v-lazy="item.src" alt="" />
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止监听  
            stop()
            // 给el元素设置src属性
            // value = '123.jpg'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src =  defaultImg
            }
          }
        })
      }
    })
  }
}

封装好后,导入main.ts里面使用,再img标签上使用v-lazy自定义指令,就可以实现图片的懒加载了

二. 组件数据懒加载

大致方法和图片懒加载差不多,就是把请求数据写在useIntersectionObserver函数中,通过传递参数把请求的函数穿进去

首先封装

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

export const useLazyData = (fn: () => void) => {
  const target = ref(null)
  onMounted(() => {
  const { stop } = useIntersectionObserver(target.value, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // home.getNewList()  // 当滑动到达,需要请求数据
      fn() // 传入的函数

      // 然后停止监听1
      stop()
      
    }
  }) 
})
    return target
}

调用

//导入方法
import {useLazyData} from '@/utils/hooks'

const target = useLazyData(home.getNewList)

最后再需要数据的dom元素上加入ref="target"属性值,就可以实现数据懒加载了,可以在network中查看