封装指令为组合式函数：v-intersect变useIntersect

将自定义指令的逻辑抽取为可复用组合式API。 · 难度：入门 · +10XP

封装指令为组合式函数：v-intersect变useIntersect

Vue指令适合DOM操作，但复用性不如组合式函数。本教程演示如何将IntersectionObserver指令重构为useIntersect组合式函数，直接在setup中调用。同时对比两种方式的适用场景：需要模板简洁时用指令，需要逻辑复用和测试时用组合式函数。

// 组合式函数方式
import { ref, onMounted, onUnmounted } from 'vue'
export function useIntersect(elRef, options = {}) {
  const isVisible = ref(false)
  let observer = null
  onMounted(() => {
    observer = new IntersectionObserver(([entry]) => {
      isVisible.value = entry.isIntersecting
    }, options)
    observer.observe(elRef.value)
  })
  onUnmounted(() => observer?.disconnect())
  return isVisible
}