vueuse/core : 组合式API常用复用逻辑的集合

1.组件数据懒加载--到可视区域再发请求（vue3）

关键：如何判断组件进入视口---useIntersectionObserver 

技术方案：

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现

链接：https://vueuse.org/core/useIntersectionObserver/

步骤：

• 1. 通过ref获取要监控的元素或组件

• 2. 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发

• 说明：监控函数执行完，可以解构出stop方法=》停止监控

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  }
)
/*
  1.stop 一个可执行的函数用来停止监听行为
  2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
  3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
  特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/

    const hot = ref(null)
    const { stop } = useIntersectionObserver(
      hot,
      ([{ isIntersecting }]) => {
        console.log('监控回调函数：', isIntersecting)
        if (isIntersecting) {
          console.log('进入可视区了，发请求')
          // 按需
          getGoods()
          // 注意：发送完，立即关闭监听=》避免多次发送
          // 关闭监控
          stop()
        }
      }
    )

 

2.吸顶效果实现

关键---获取页面滚动高度---所用函数：useWindowScroll

 

 

1 import { useWindowScroll } from '@vueuse/core'
2 setup () {
3   // y表示具体顶部的滚动距离 会动态更新
4     const { y } = useWindowScroll()
5     return { y }
6   }