useScriptTriggerInteraction
useScriptTriggerInteraction 函数的 API 文档。
创建一个触发器，在任意指定的用户交互事件发生时加载脚本。这非常适合仅在用户真正与您的网站交互时加载脚本，从而提供出色的性能优化。
函数签名
function useScriptTriggerInteraction(options: InteractionScriptTriggerOptions): Promise<boolean>
参数
export interface InteractionScriptTriggerOptions {
/**
* 要监听的交互事件。
*/
events: string[]
/**
* 监听事件的目标元素。
* @default document.documentElement
*/
target?: EventTarget | null
}
返回值
当任意指定的交互事件发生且应加载脚本时，返回一个解析为 true 的 Promise；如果触发器被取消，则解析为 false。
在 Nuxt 配置中的使用
为了方便起见，您可以直接在 nuxt.config 中使用此触发器，而无需显式调用组合式函数：
export default defineNuxtConfig({
scripts: {
registry: {
googleAnalytics: [{
id: 'GA_MEASUREMENT_ID'
}, {
trigger: { interaction: ['scroll', 'click', 'keydown'] }
}]
}
}
})
export default defineNuxtConfig({
scripts: {
globals: {
chatWidget: ['https://widget.example.com/chat.js', {
trigger: { interaction: ['scroll', 'click', 'touchstart'] }
}]
}
}
})
常见事件类型
以下是一些常用的交互事件：
- 鼠标事件：
click、mousedown、mouseup、mouseover、mouseenter、mouseleave - 触摸事件：
touchstart、touchend、touchmove - 键盘事件：
keydown、keyup、keypress - 滚动事件：
scroll、wheel - 聚焦事件：
focus、blur、focusin、focusout
示例
基本用法
当用户滚动、点击或按键时加载脚本：
const script = useScript({
src: 'https://example.com/chat-widget.js',
}, {
trigger: useScriptTriggerInteraction({
events: ['scroll', 'click', 'keydown']
})
})
首次交互时加载分析脚本
仅当用户实际与您的网站交互时加载分析脚本：
<script setup lang="ts">
// 在任意用户交互时加载分析脚本
const { $script } = useScriptGoogleAnalytics({
id: 'GA_MEASUREMENT_ID'
}, {
trigger: useScriptTriggerInteraction({
events: ['click', 'scroll', 'keydown', 'touchstart']
})
})
// 追踪首次交互
watch($script.status, (status) => {
if (status === 'loaded') {
gtag('event', 'first_interaction', {
event_category: 'engagement'
})
}
})
</script>
监听特定元素
在特定元素上监听事件：
<script setup lang="ts">
const headerEl = ref<HTMLElement>()
const script = useScript({
src: 'https://example.com/header-widget.js'
}, {
trigger: useScriptTriggerInteraction({
events: ['click', 'mouseover'],
target: headerEl
})
})
</script>
<template>
<header ref="headerEl">
<!-- 该脚本在此 header 被点击或悬停时加载 -->
<nav>...</nav>
</header>
</template>
渐进式功能加载
根据不同的交互类型加载功能：
<script setup lang="ts">
// 用户进行任意输入交互时加载搜索增强功能
const searchScript = useScript({
src: 'https://cdn.example.com/search.js'
}, {
trigger: useScriptTriggerInteraction({
events: ['click', 'focus', 'keydown']
})
})
// 用户滚动或点击分享按钮时加载社交分享功能
const socialScript = useScript({
src: 'https://cdn.example.com/social-sharing.js'
}, {
trigger: useScriptTriggerInteraction({
events: ['scroll', 'click']
})
})
</script>
移动端优化加载
使用触摸事件实现移动端特性优化加载：
<script setup lang="ts">
// 在触摸交互时加载移动端特定功能
const mobileScript = useScript({
src: 'https://cdn.example.com/mobile-features.js'
}, {
trigger: useScriptTriggerInteraction({
events: ['touchstart', 'touchmove', 'scroll']
})
})
</script>
最佳实践
- 从常见事件开始：对大多数用例来说，使用
['scroll', 'click', 'keydown']是不错的默认选择 - 考虑移动用户：包含
touchstart等触摸事件以优化移动端体验 - 针对特定元素监听：使用
target选项只监听页面相关部分的事件 - 合理组合事件：避免事件类型过多，专注于有意义的交互
- 测试性能影响：验证基于交互的加载是否真正改善了性能指标
- 回退方案考虑：考虑用户不交互时的情况（例如结合超时触发器）