vue3数据懒加载 列表滚动加载 可能是全网最容易理解的

百度搜了几篇懒加载，都写的不详细，摸索了下，写篇博客记录下

需求是这样的，分页加载改成滚动到最后再加载，因为组件是自己写的，翻了下组件库，没有这个功能，就自己写一个

首先在hooks里面写一个ts文件，我这取名叫做use-lazy-data.ts

import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';
// 数据懒加载函数
export const useLazyData = () => {
  const target = ref(null);
  const isLazy = ref(false);
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 不注释代码，函数只能触发一次 
      // stop();
      isLazy.value = true;
    }
  });

  return {
    target,
    isLazy,
  };
};

然后在组件vue文件里面引入

<template>
  <div v-for="item in list" :key="item.id" @click="onSelect(item)">
    XXXX具体代码不贴了
  </div>
  <div v-if="list.length > 9" ref="target" ></div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
import { useLazyData } from './hooks/use-lazy-data';

const { target, isLazy } = useLazyData();

watch(
  () => isLazy.value,
  () => {
    if (isLazy.value) {
      //如果触发了懒加载，下面是具体实现
      //比如调用函数更新增加list列表数据，具体代码不写了
      更新数据函数();
      isLazy.value = false;
    }
  }
);
</script>

下面讲解一下，如果浏览器没有加载到ref=target的div，不会触发ts文件里面的useIntersectionObserver函数。
当滚动条下拉，浏览器显示target这个div的时候，触发函数，然后改变isLazy的值，我们同时也在监听isLazy属性，当监听到变化的时候，就比如滚动条拉到最下面了，需要加载新的数据的时候，触发我们的 “更新数据函数”，然后重新调用接口获取新的list数据。

如果只想触发一次，就把ts文件里面的stop();去掉注释即可