VueUse 学习 —— useIntersectionObserver`useIntersectionObserver

useIntersectionObserver 是 Vueuse 库中的一个钩子函数，用于检测目标元素在视口中的可见性。

具体来说，它的作用如下：

使用 Intersection Observer API：useIntersectionObserver 封装了 Intersection Observer API，该 API 可以观察元素是否进入视口或离开视口。
目标元素的选择：可以传递一个元素引用或计算属性作为目标元素，该钩子函数会观察该元素的可见性变化。
可选的配置项：可以传递一个配置对象来自定义观察的行为。这些选项包括根元素、根边距、阈值等。
回调函数：需要提供一个回调函数，当目标元素进入或离开视口时，该回调函数会被调用。可以在回调函数中执行相应的逻辑。
控制钩子函数状态：useIntersectionObserver 提供了几个控制方法，例如暂停观察 (pause)、恢复观察 (resume) 和停止观察 (stop)。这些方法允许你控制观察过程的启停。

通过使用 useIntersectionObserver，可以方便地在 Vue 组件中监测元素的可见性，例如实现懒加载、无限滚动等功能。它简化了使用 Intersection Observer 的流程，使得操作更加简单和易用。

用法

<div ref="target">
  <h1>Hello world</h1>
</div>

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}

指令用法

<script setup lang="ts">
import { ref } from 'vue'
import { vIntersectionObserver } from '@vueuse/components'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]) {
  isVisible.value = isIntersecting
}

</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

源码分析

源码地址

支持性检测：通过使用 useSupported 钩子函数，判断当前环境是否支持 Intersection Observer API。
目标元素处理：通过传递目标元素参数 target，可以是单个元素引用、元素引用的数组、或计算属性的结果。钩子函数会将目标元素转换为一个元素引用数组，并进行非空过滤。
Intersection Observer 的创建和使用：当 isActive 值为 true 时，钩子函数会创建 Intersection Observer 实例，并观察目标元素的可见性。通过传递给钩子函数的 callback 回调函数，可以在目标元素进入或离开视口时执行相应的逻辑。
配置选项：可以通过传递选项对象 options 来自定义 Intersection Observer 的行为。例如，可以指定根元素、根边距、阈值等。
控制钩子函数的状态：钩子函数提供了一些控制方法，包括暂停 (pause)、恢复 (resume) 和停止 (stop)。这些方法可以用于暂停或恢复 Intersection Observer 的观察，或完全停止观察过程。

useIntersectionObserver 是一个方便的 Vueuse 钩子函数，用于在 Vue 组件中跟踪元素的可见性。它通过封装 Intersection Observer API，使得监测元素可见性变得更加简单和便捷。

developer.mozilla.org/en-US/docs/…