关键概念

该 useScript 可组合组件是 Nuxt 脚本的核心，用于加载所有脚本。

在 useScript 之上构建了额外的抽象层，以便更容易地以不同的方式加载脚本。

1. 注册表脚本 - 预先配置的第三方脚本，可以通过 Nuxt 配置、可组合组件和组件加载。
2. 全局脚本 - 通过你的 Nuxt 配置文件加载脚本。

Unhead 抽象

Nuxt 脚本 useScript 可组合组件是 Unhead 的 useScript 的抽象，而 Unhead 又是 useHead 之上的抽象。Nuxt 脚本 useScript 中也提供了许多通过 useHead 可用的功能。

脚本单例

使用 Nuxt 脚本，无法多次加载具有相同 src（或 key）的脚本。这是因为脚本在全局加载，并在所有组件之间共享。

这意味着脚本只会进行一次初始化过程，任何后续对 useScript 的调用都将返回相同的实例。

出于这个原因，你可能要考虑将你的 useScript 调用包装在它们自己的可组合组件中，以方便脚本的实例化。

export function useMyScript() {
  return useScript({
    src: 'https://example.com/script.js',
  })
}

默认行为

Nuxt 脚本不会在 SSR 响应中插入脚本标签。这是一个性能决策，旨在最大程度地减少对水合过程的干扰。相反，默认情况下，在 Nuxt 在客户端完全水合后加载脚本。

你可以通过修改 defaultScriptOptions 来更改此行为。

Nuxt 脚本还会在脚本元素中插入一些额外的标签，以帮助提高性能和隐私。

• async - 异步加载脚本，以防止阻塞页面渲染。
• defer - 推迟脚本加载，以确保它们按加载顺序执行。
• crossorigin="anonymous" - 使用 anonymous 属性加载脚本，以防止它们访问 cookie。
• referrerpolicy="no-referrer" - 使用 no-referrer 策略加载脚本，以防止它们发送推荐来源标头。

了解代理函数

你可能想知道 useScript 可组合组件如何能够返回在加载脚本之前可以调用的 SSR 安全函数。

const { proxy } = useScript('/script.js')
// just works as you'd expect - magic?
proxy.gtag('event', 'page_view')

该 gtag 函数调用是一个代理，它将函数排队，以便在加载脚本时调用。如果脚本从未加载，则该函数将永远不会被调用。

这有几个好处

• SSR 安全
• 如果脚本从未加载（被广告拦截器阻止），不会破坏你的网站
• 允许你随时加载脚本，而无需担心脚本和函数调用的顺序

但它也有一些缺点

• 它只适用于你不需要返回值的函数。你可以等待函数调用以获取返回值，但这会阻塞页面渲染。
• 如果你没有意识到它的工作原理，调试可能会很令人困惑。

建议等待脚本加载，如果你想直接访问脚本的 API。

const { onLoaded } = useScript('/script.js')
// use the script instance directly, not proxied
onLoaded(({ gtag }) => {
  gtag('event', 'page_view')
})