1.直接上代码，这里用了一个IntersectionObserver API，详细使用方法可以看官方文档
2.IntersectionObserver() 构造函数创建一个新对象，当它检测到目标元素的可见性已超过一个或多个阈值时，该对象将执行指定的回调函数。
3. IntersectionObserver Entry 是一个包含有关目标元素和其相对于根节点的交叉信息的对象。每次观察元素的可见性变化时IntersectionObserver 实例会将一个或多个 IntersectionObserver Entry 对象传递给其回调函数。我们可以检查这些对象的 isIntersecting 属性来确定元素是否进入或离开了视图范围
3.1IntersectionObserver Entry.isIntersecting 是 IntersectionObserver Entry 对象的一个属性，用于指示观察元素与根节点是否相交
3.2当观察元素部分或全部进入根节点（或视口）threshold: 1时，isIntersecting 属性为 true。当观察元素完全离开根节点时，该属性为 false
在懒加载等场景中，我们通常需要在元素进入视图时加载它所需的数据，因此 IntersectionObserver Entry.isIntersecting 属性非常实用
3.1
<template><div ref="container" style="height: 400px; overflow-y: scroll"><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul></div></template><script lang="ts" setup>import { ref, onMounted, onBeforeUnmount } from 'vue'import { debounce } from 'lodash'const isLoading = ref(false) //loadingconst page = ref(1)const items: any = ref([])const container: any = ref(null) //ref获取dom元素const observer: any = ref(null)const fetchData = () => {isLoading.value = true// TODO: 发送请求获取数据...// 模拟异步加载数据setTimeout(() => {const newItems = Array.from({ length: 10 },(item, index) => `Item ${items.value.length + index}`)items.value = [...items.value, ...newItems]isLoading.value = false}, 1000)console.log(items.value)}onMounted(() => {// 在 options 中将容器元素作为根节点（root）const options = {root: container.value,threshold: 0.5, //将阈值设置为 0.5，表示当观察元素的一半进入视图时就触发回调函数}observer.value = new IntersectionObserver(debounce(([entry]: any) => {if (entry.isIntersecting && !isLoading.value) {page.value++fetchData()}}, 500),options)// 将观察器对象绑定在列表中的最后一个子元素上，以便能够监听它的可见性变化observer.value.observe(container.value.lastElementChild)})onBeforeUnmount(() => {// 停止监听observer.value.disconnect()})</script>
