Vueuse/core

vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。

@vueuse/core 包，它封装了常见的一些交互逻辑。

下载：

npm i @vueuse/core@4.9.0

下面是自己在项目中运用到的函数 

1、useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候蜷曲的距离。x横向，y纵向。而且这两个数据是响应式的

下面的代码，下载后先引入此函数，然后从里面结构出y，即当前页面滚动时距离顶部的距离，然后可以将y返回出去，在模板中使用，然后可以设置当y>一定值的时候，让其做一些操作。

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()

 2、useIntersectionObserver()，来实现监听进入可视区域行为。

通过下面的程序可以实现进入一个看见一个dom的时候再去请求数据，实现数据的懒加载

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
    //如果进入了可视区，就先让其停止监测，然后进行数据的请求
    if (isIntersecting) {
          stop()
          findNew().then(data => {
          goods.value = data.result
    })
  },
    // 配置选项，相交的比例大于0就触发
    {
      threshold: 0
    }
)

3、onClickOutside()：（点击一个Dom其他地方的逻辑操作）

可以看这篇文章： https://blog.csdn.net/m0_45219210/article/details/124715223?spm=1001.2014.3001.5501

 持续更新中......