useExposure()

useExposure 是通用的「元素进视口一次性曝光」时机检测：对目标元素挂 IntersectionObserver（默认可见比例 ≥ 0.5），元素首次进入视口时调用一次回调并自动停止监测（每元素只触发一次）。

它只负责时机，回调内做什么完全由你决定——调 useTracker 上报 WebSDK、调业务自有打点 SDK、或纯 UI 逻辑（懒加载 / 动画触发）都可以。framework 内部的广告曝光（useAdTrack）与 SwLink 的 :track.exposure 都基于它。

SSR / 无 IntersectionObserver 环境自动 no-op（返回空 cleanup），客户端安全。

参数

useExposure(el, onExposed, options?)

返回值

() => void —— cleanup 函数：手动停止监测（组件卸载时调用；已触发过则为幂等 no-op）。

使用示例

// 示例 1：内容卡片曝光上报（配合 useTracker）
const cardRef = ref<HTMLElement>()
let stop = () => {}
onMounted(() => {
  stop = useExposure(cardRef.value!, () => {
    useTracker().track('appPageitemExposure', { item_id: '123', item_type: 'video', /* … */ })
  })
})
onBeforeUnmount(() => stop())

// 示例 2：业务自有打点 SDK（逃生舱 —— 回调内随意）
onMounted(() => {
  useExposure(bannerRef.value!, () => myOwnSdk.report('banner_seen'))
})

// 示例 3：自定义阈值（长卡片露出 20% 即算曝光）
onMounted(() => {
  useExposure(listItemRef.value!, onSeen, { threshold: 0.2 })
})

注意事项

• 每元素只触发一次：触发后内部自动 disconnect，列表复用 DOM（虚拟滚动）时如需重新计曝光，须重新调用。
• 内容卡片优先用 SwLink :track：卡片链接场景 SwLink 已内置曝光 + 点击双埋点（内部即本 composable），不必手动接。
• 在 onMounted 内调用（需要真实 DOM 元素）；卸载时调用返回的 cleanup。

相关

• SwLink —— :track.exposure 内置曝光埋点
• useAdTrack —— 广告曝光（内部复用本 composable）
• useTracker —— WebSDK 统一上报入口