图片、数据、路由的懒加载

一、图片、数据懒加载

图片（数据）正式进入到可视区中时，才加载对应的图片（数据），否则不请求图片（数据）

基本使用（useIntersectionObserver的基本使用）

1、下包，此方法是vueuse封装的useIntersectionObserver实现的

npm i @vueuse/core

2、核心代码-图片懒加载

<script lang="ts" setup>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref<HTMLImageElement | null>(null)
// 实时监听这个dom是否在可视区内
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
// 回调函数: 当 isIntersecting 变化时：从可见->不可见； 不可见->可见
//    isIntersecting: 当前是否可见？
  console.log('执行了')
  console.log(isIntersecting)

  if (isIntersecting) {
    target.value!.src =
      'https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
      // stop停止监听
      stop()
  }
})
</script>

<template>
  <div style="height: 3000px"></div>
  <img ref="target" alt="" />
</template>

<style scoed lang="less"></style>

3、数据懒加载

数据的懒加载与图片的方法差不多，将内部的图片换成数据请求即可

<script lang="ts" setup>
const { home } = useStore()
const target = ref(null)
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log(isIntersecting)
  // 判断是否看见
  if (isIntersecting) {
  	// 发送的请求
    home.getNewList()
    stop()
  }
})
</script>

<template>
  <div class="home-new">
    <HomePanel ref="target" title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    </HomePanel>
  </div>
</template>

二、路由懒加载

概念

路由对应的组件使用到的时候才去加载

作用

提高页面的响应速度

使用

导入的时候使用ES提供的语法const xxx = () => import(‘@/components/xxx’)

const router = createRouter({
  history: createWebHashHistory(),
  scrollBehavior: () => {
    return {
      top: 0,
    }
  },
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category/:id',
          // 路由懒加载
          component: () => import('@/views/Category/Category.vue')
        }
      ]
    }
  ]
})