如何用VueUse Intersection Observer高效管理同组件多元素可见性状态？

核心问题分析 #

你之前的代码依赖全局isVisible状态，所有元素共享同一值，导致单个元素进入视口时，所有元素都会触发fade-in类。要解决这个问题，必须让每个元素独立维护自身的可见状态，同时实现可复用逻辑以支持自定义配置。

方案1：自动管理类的可复用指令组合式函数 #

创建组合式函数返回自定义指令钩子，自动为每个元素监听相交状态并添加/移除指定类，支持传入rootMargin等配置项。

1. 编写组合式函数

// composables/useIntersectionDirective.js
import { useIntersectionObserver } from '@vueuse/core'

export function useIntersectionDirective() {
  return {
    mounted(el, binding) {
      // 解析绑定参数：默认类名fade-in，可自定义配置
      const { className = 'fade-in', ...observerOptions } = binding.value || {}
      
      // 为当前元素单独创建监听实例
      useIntersectionObserver(
        el,
        ([{ isIntersecting }]) => {
          // 相交时添加类，离开视口时可选择移除（按需调整）
          isIntersecting 
            ? el.classList.add(className) 
            : el.classList.remove(className)
        },
        observerOptions // 传入rootMargin、threshold等配置
      )
    }
  }
}

2. 在组件中使用

<script setup>
import { useIntersectionDirective } from './composables/useIntersectionDirective'

// 注册自定义指令
const vIntersection = useIntersectionDirective()
</script>

<template>
  <!-- 默认fade-in类 + 默认监听配置 -->
  <h1 v-intersection></h1>
  
  <!-- 自定义类名 + rootMargin配置 -->
  <h2 v-intersection="{ className: 'slide-up', rootMargin: '-80px 0px' }"></h2>
  
  <!-- 自定义阈值配置 -->
  <p v-intersection="{ threshold: 0.5 }"></p>
  
  <!-- 自定义类名 + 左右边距配置 -->
  <div v-intersection="{ className: 'fade-scale', rootMargin: '0px -20px' }"></div>
</template>

<style>
.fade-in {
  transition: opacity 0.6s ease;
  opacity: 1;
}
.slide-up {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: translateY(0);
  opacity: 1;
}
.fade-scale {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: scale(1);
  opacity: 1;
}
/* 未激活状态样式 */
h1, h2, p, div {
  opacity: 0;
  transform: translateY(20px);
}
</style>

方案2：绑定元素自身状态（手动控制类逻辑） #

若需在模板中自定义类的触发逻辑，可将可见状态绑定到元素自身，通过事件通知Vue更新视图。

1. 组合式函数

// composables/useElementIntersection.js
import { useIntersectionObserver } from '@vueuse/core'

export function useElementIntersection(options = {}) {
  return {
    mounted(el) {
      // 给元素添加自身的可见状态属性
      el._isVisible = false
      
      useIntersectionObserver(
        el,
        ([{ isIntersecting }]) => {
          el._isVisible = isIntersecting
          // 触发自定义事件，通知Vue更新视图
          el.dispatchEvent(new CustomEvent('visibility-change'))
        },
        options
      )
    }
  }
}

2. 组件中使用

<script setup>
import { useElementIntersection } from './composables/useElementIntersection'

const vObserveVisibility = useElementIntersection({ rootMargin: '-50px' })

// 获取元素自身的可见状态
const isElementVisible = (el) => el._isVisible
</script>

<template>
  <h1 
    v-observe-visibility
    @visibility-change="$forceUpdate()"
    :class="{ 'fade-in': isElementVisible($el) }"
  ></h1>
  
  <h2 
    v-observe-visibility
    @visibility-change="$forceUpdate()"
    :class="{ 'fade-in': isElementVisible($el) }"
  ></h2>
</template>

方案对比 #

• 方案1更简洁，无需手动处理状态和视图更新，适合直接添加动画类的场景。
• 方案2灵活性更高，允许在模板中自定义类的触发逻辑，但需要额外触发视图更新。

两种方案都避免了为每个元素创建单独ref和全局状态，完美实现多元素独立监听的需求。

内容的提问来源于stack exchange，提问作者Michael