Vue3 Composition API：辅助函数无法向组件返回更新值问题

问题根源 #

1. 异步回调的滞后性：onIntersect函数执行时会立即返回初始值false，而IntersectionObserver的回调是异步触发的，后续修改bool的值根本无法同步到组件已经赋值的subnavDiv.value上。
2. 普通变量无响应式：辅助函数里的bool是普通变量，不是Vue的响应式引用（ref/reactive），即使后续修改，组件也无法追踪到变化。

解决方案 #

让辅助函数返回一个ref响应式变量，这样在异步回调中修改ref.value时，组件能自动感知并更新。同时添加清理逻辑，避免组件卸载后内存泄漏。

修改后的辅助函数 onIntersect.js

import { ref } from 'vue'

const onIntersect = (rootElement, thresholdValue, elementToChange, elementToWatch) => {
  let prevYPosition = 0
  let directionVar = 'up'
  const bool = ref(false) // 用ref创建响应式变量
  let observer = null

  const options = {
    root: rootElement,
    rootMargin: `${elementToChange.offsetHeight * -1}px`,
    threshold: thresholdValue
  }

  const setScrollDirection = () => {
    if (rootElement.scrollTop > prevYPosition) {
      directionVar = 'down'
    } else {
      directionVar = 'up'
    }
    prevYPosition = rootElement.scrollTop
  }

  const onIntersection = ([e]) => {
    setScrollDirection()
    if ((directionVar === 'down' && e.boundingClientRect.top > 0) || !e.isIntersecting) {
      console.log('down')
      bool.value = true // 修改响应式变量的value
    } else {
      bool.value = false
    }
    if (
      e.isIntersecting &&
      (e.boundingClientRect.top < elementToChange.offsetHeight ||
        e.boundingClientRect.top > elementToChange.offsetHeight)
    ) {
      bool.value = false
    }
  }

  observer = new IntersectionObserver(onIntersection, options)
  observer.observe(elementToWatch)

  // 返回清理函数，用于组件卸载时停止观察者
  const cleanup = () => {
    observer?.disconnect()
  }

  return { bool, cleanup }
}

export default onIntersect

组件中的调用方式

// component.vue
import { onMounted, onUnmounted, ref } from 'vue'
import onIntersect from './onIntersect.js'

setup() {
    let cleanupFn = null
    // 直接使用辅助函数返回的响应式变量，或者保留自己的ref同步更新
    const subnavDiv = ref(false)

    onMounted(() => {
      const rootEl = document.querySelector('.main')
      const fixedNav = document.querySelector('.main-nav')
      const el = document.querySelector('.search')

      const { bool, cleanup } = onIntersect(rootEl, 0.7, fixedNav, el)
      // 方式1：直接替换subnavDiv为返回的响应式变量
      // subnavDiv = bool
      // 方式2：同步初始值，后续自动响应更新（因为bool是ref）
      subnavDiv.value = bool.value
      // 保存清理函数
      cleanupFn = cleanup
    })

    // 组件卸载时清理观察者
    onUnmounted(() => {
      cleanupFn?.()
    })

    return {
      subnavDiv
    }
  }

关键说明 #

• 辅助函数必须返回ref对象，确保变量具备响应式能力，组件能追踪其变化。
• 添加cleanup函数是为了在组件卸载时断开IntersectionObserver，避免不必要的内存占用。
• 组件中可以直接使用辅助函数返回的bool作为响应式变量，无需额外赋值，这样后续所有更新都会自动同步到组件视图。

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