脚本触发器
使用 Nuxt Scripts 灵活的触发系统控制脚本加载时机。
在 StackBlitz 上试用实时的性能示例，体验触发器的实际效果。
Nuxt Scripts 提供了一个灵活的触发系统，用于控制脚本的加载时机，帮助你通过在合适的时刻为用户加载脚本来优化性能。
触发器的工作原理
传入任意响应式值作为 trigger —— 当其变为真值时，脚本将加载：
const shouldLoad = ref(false)
useScript('https://example.com/script.js', {
trigger: shouldLoad
})
// 后续：触发加载
shouldLoad.value = true
它支持 refs、计算属性 refs、getter 函数和 Promise：
// Ref
trigger: shouldLoad
// 计算属性
trigger: computed(() => !!route.query.affiliateId)
// Getter 函数
trigger: () => shouldLoad.value
// Promise
trigger: new Promise(resolve => setTimeout(resolve, 3000))
默认：onNuxtReady
默认情况下，脚本使用 onNuxtReady 触发器，提供“空闲加载”行为，即仅在页面完全交互式后加载脚本。这将最大限度地减少对核心网页指标和用户体验的影响。
onNuxtReady 触发器确保脚本在以下情况下加载：
- Nuxt hydration 完成后
- 浏览器空闲且主线程可用时
- 不阻塞关键页面渲染或用户交互
// 默认行为——为了清晰显式写出
useScript('https://widget.intercom.io/widget/abc123', {
trigger: 'onNuxtReady'
})
// 注册脚本默认也使用 onNuxtReady
useScriptGoogleAnalytics({
id: 'GA_MEASUREMENT_ID'
// trigger: 'onNuxtReady' 是隐含的
})
你可以通过修改 defaultScriptOptions 来改变此默认值。
专用触发器
空闲超时
使用 useScriptTriggerIdleTimeout 在 Nuxt 准备好后延迟指定时间再加载脚本：
useScript('https://example.com/analytics.js', {
trigger: useScriptTriggerIdleTimeout({ timeout: 5000 })
})
export default defineNuxtConfig({
scripts: {
registry: {
googleAnalytics: [{
id: 'GA_MEASUREMENT_ID'
}, {
trigger: { idleTimeout: 3000 }
}]
}
}
})
用户交互
使用 useScriptTriggerInteraction 在用户与站点交互时加载脚本：
useScript('https://example.com/chat-widget.js', {
trigger: useScriptTriggerInteraction({
events: ['scroll', 'click', 'keydown']
})
})
export default defineNuxtConfig({
scripts: {
globals: {
chatWidget: ['https://widget.example.com/chat.js', {
trigger: { interaction: ['scroll', 'click', 'touchstart'] }
}]
}
}
})
元素事件
使用 useScriptTriggerElement 根据特定元素的交互来触发脚本：
const buttonEl = ref<HTMLElement>()
useScript('https://example.com/feature.js', {
trigger: useScriptTriggerElement({
trigger: 'visible', // 或 'hover'、'click' 等等
el: buttonEl,
})
})
基础触发器
手动控制
使用 manual 触发器可以完全控制脚本的加载时机：
const { load } = useScript('https://example.com/script.js', {
trigger: 'manual'
})
// 你决定何时加载
await load()