前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载在 Vue 3 应用中集成 Twitch、YouTube 等第三方 SDK或在运行时按需加载一段远程 JavaScript是常见的真实需求。VueUse 提供的useScriptTag组合式函数正是为此而生它负责在组件挂载时创建并注入script标签、在组件卸载时自动清理并且能智能复用相同 URL 的脚本避免重复请求。读完本文你将掌握useScriptTag的全部配置项、手动加载模式以及它内部基于 DOM 查询、事件监听与生命周期钩子的完整实现原理能够直接在自己的项目中正确使用并排查问题。功能概述useScriptTag的核心职责可以概括为三点按需注入给定一个脚本 URL在组件挂载时自动创建script标签并追加到document.head自动清理组件卸载时自动把该脚本标签从 DOM 中移除防止脚本与事件监听器长期驻留URL 去重如果页面中已经存在相同src的脚本标签不会重复创建而是直接复用它。这一行为与其文档描述完全一致脚本在组件挂载时自动加载、卸载时自动删除同时需要注意如果同页面上此前某次调用已经加载过同一个 URL 并随后卸载了该脚本那么再次调用时脚本会重新加载因为旧的标签已被移除见 index.md。基础用法自动加载模式默认情况下useScriptTag只接受一个脚本 URL 和一个加载完成的回调组件挂载后立即加载脚本import { useScriptTag } from vueuse/core useScriptTag( https://player.twitch.tv/js/embed/v1.js, // 脚本加载完成后触发回调参数为已就绪的 script 元素 (el: HTMLScriptElement) { // do something }, )回调中的el就是真实存在 DOM 中的HTMLScriptElement你可以在这里初始化第三方 SDK、读取脚本暴露的全局对象或执行后续业务逻辑。useScriptTag从 packages/core/index.ts 中统一导出export * from ./useScriptTag因此它和其他所有核心工具一样可以直接从vueuse/core包中按需引入。该包要求 Vue^3.5.0作为 peerDependency见 packages/core/package.json。手动模式精确控制加载与卸载时机如果不想在挂载时就加载脚本而是希望在某个用户操作、路由跳转或业务条件成立时才加载可以把manual: true传给配置项。此时useScriptTag返回load与unload两个控制函数供你自行决定时机import { useScriptTag } from vueuse/core const { scriptTag, load, unload } useScriptTag( https://player.twitch.tv/js/embed/v1.js, () { // do something }, { manual: true }, ) // 手动控制 await load() await unload()load返回一个 Promise因此可以配合await在脚本真正就绪后再继续后续逻辑unload则同步移除脚本标签。关于两者的返回值与具体行为在后面的源码剖析小节中会详细展开。完整配置项一览useScriptTag的第二个参数是onLoaded回调可省略第三个参数是配置对象UseScriptTagOptions。除文档明确提到的manual外它还支持一大批实用选项全部定义在 packages/core/useScriptTag/index.ts 的UseScriptTagOptions接口中配置项类型默认值说明immediatebooleantrue是否在组件挂载后立即加载脚本。设为false时即使不开启manual也需要手动调用load()才会加载asyncbooleantrue是否给script添加async属性typestringtext/javascript脚本的type属性manualbooleanfalse是否完全手动控制加载与卸载时机crossOriginanonymous \| use-credentials—设置脚本的crossorigin属性用于 CORS 场景referrerPolicyno-referrer \| no-referrer-when-downgrade \| origin \| origin-when-cross-origin \| same-origin \| strict-origin \| strict-origin-when-cross-origin \| unsafe-url—设置脚本的referrerpolicy属性控制请求携带的 Referrer 信息noModuleboolean—是否添加nomodule属性常用于为不支持模块的旧浏览器加载降级脚本deferboolean—是否添加defer属性让脚本在文档解析完成后执行attrsRecordstring, string{}以对象形式追加任意自定义属性如id、data-*等noncestringundefinedCSP内容安全策略所需的 nonce 值documentDocument默认 document自定义 document 实例例如处理 iframe 或测试环境其中document选项继承自 packages/core/_configurable.ts 中定义的ConfigurableDocument接口默认值defaultDocument仅在客户端isClient环境下指向window.document这在服务端渲染时会自动退化为undefined从而保证 SSR 安全。结合配置项一个带自定义属性和 CSP nonce 的完整示例大致如下const { load } useScriptTag( https://example.com/sdk.js, () console.log(SDK ready), { attrs: { id: my-sdk, data-env: production }, nonce: RANDOM_NONCE, defer: true, }, )这些选项在源码中会逐一映射到创建的script元素上具体映射逻辑见下文剖析。源码剖析useScriptTag 是如何工作的理解了配置项再来看看 packages/core/useScriptTag/index.ts 内部的核心实现这能帮你理解它为什么具备自动加载、自动卸载、URL 去重三大行为。返回值结构useScriptTag返回UseScriptTagReturnexport interface UseScriptTagReturn { scriptTag: ShallowRefHTMLScriptElement | null load: (waitForScriptLoad?: boolean) PromiseHTMLScriptElement | boolean unload: () void }scriptTag一个ShallowRef指向当前实际存在的script元素卸载后变为null可响应式地驱动 UI 状态load加载函数返回 Promise可通过参数控制等待策略下文说明unload卸载函数同步移除脚本标签。loadScript查询、创建与事件绑定loadScript是内部核心函数源码第 98 行起其流程为SSR 保护如果document不存在如服务端环境直接resolve(false)不进行任何 DOM 操作URL 查询去重通过document.querySelector(script[src...])查找是否已存在相同src的脚本。若不存在则document.createElement(script)创建新元素并依次设置type、async、src再按配置可选地设置defer、crossOrigin、noModule、referrerPolicy、nonce最后通过el.setAttribute把attrs中的自定义属性全部写入若已存在且带有data-loaded标记则直接复用并 resolve事件监听用useEventListener为脚本元素绑定error、abort两者都 reject与load设置data-loaded标记、调用onLoaded回调并 resolve事件监听选项为{ passive: true }追加到 headdocument.head.appendChild(el)注入页面。其中查找已有脚本并复用正是文档中相同 URL 不重复创建承诺的实现依据而data-loaded属性标记则保证了脚本加载完成后后续复用同一 URL 的调用能立即拿到已就绪的元素。load单例 Promise 防重复调用load是对loadScript的单例包装内部缓存_promise如果已有进行中的加载请求直接返回同一个 Promise避免对同一脚本重复触发加载。load(waitForScriptLoad true)的布尔参数含义是true时 Promise 等到脚本触发load事件后才 resolvefalse时脚本追加到 DOM 后立即 resolve不等待真实加载完成。unload移除脚本并重置状态unload会先将_promise置空、把scriptTag.value设为null再通过querySelector找到对应src的脚本元素并从document.head移除。这也解释了文档中的提醒如果你在卸载后又用同一 URL 调用useScriptTag由于旧标签已被删除脚本会重新加载一次。生命周期绑定源码末尾通过tryOnMounted与tryOnUnmounted来自vueuse/shared见 packages/shared/tryOnMounted/index.ts把加载与清理挂到组件生命周期上immediate !manual时挂载后调用load!manual时卸载时调用unload。值得注意的是tryOnMounted的语义如果在组件生命周期内调用则挂载到onMounted否则如非组件上下文直接同步执行这让useScriptTag在普通模块或测试环境中也能工作。测试验证行为都有据可查仓库为useScriptTag提供了完整的浏览器环境测试 packages/core/useScriptTag/index.browser.test.ts可以作为理解其行为的行为规范自动加载immediate: true时组件挂载后document.head.appendChild被调用且document.head中出现对应src的HTMLScriptElementURL 复用同一 URL 分别创建两个manual: true的实例并各自loadappendChild只被调用一次两个实例共享同一个脚本元素自定义属性传入attrs: { id: ..., data-test: ... }后创建的元素上能读取到对应属性卸载清理组件unmount后removeChild被调用、脚本从 DOM 消失、scriptTag变为null手动 unload调用unload同样能移除脚本多实例卸载两个共享同一 URL 的实例分别unload时removeChild也只被调用一次幂等清理。这些测试用例直接印证了本文前文所述的自动加载 / URL 去重 / 自动卸载三大行为也为你排查脚本没加载、脚本没移除等问题提供了参照。最佳实践与注意事项重复加载提醒useScriptTag只保证同一时刻不重复创建同一 URL 的脚本。如果某次调用加载后又卸载了该脚本下次调用会重新发起加载——这正是文档强调的注意事项适合用manual模式配合全局状态统一管理等待语义默认load()会等待脚本真正加载完成load事件适合先加载 SDK 再初始化的时序依赖场景若只需尽快把脚本放进 DOM可传load(false)立即返回SSR 安全服务端没有document此时loadScript直接 resolvefalse而不会抛错配合immediate也不会在服务端注入脚本可安全用于 Nuxt 等 SSR 框架自定义 document在 iframe 或特殊测试环境中可通过document选项注入自定义 Document避免影响主文档CSP 环境受内容安全策略约束的站点应使用nonce选项传入与 CSP 策略匹配的 nonce 值响应式 srcsrc参数的类型是MaybeRefOrGetterstring即支持传入 ref 或 getter让脚本地址本身也可以是响应式的。总而言之useScriptTag用极小的 API 面一个 URL、一个回调、一组配置项封装了动态脚本注入 生命周期管理 去重复用这一完整能力其文档、源码与测试三者在仓库中相互印证是理解 VueUse小而美设计哲学的典型示例。赞分享前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载相关推荐Middleman中的第三方脚本管理优化第三方资源加载Middleman中的第三方脚本管理优化第三方资源加载 在现代Web开发中第三方脚本如分析工具、广告SDK、社交分享按钮已成为页面不可或缺的组成部分。然前端开发工具VueUse useScriptTag 深度解析在 Airi 中以声明式方式管理动态 Script 标签VueUse useScriptTag 深度解析在 Airi 中以声明式方式管理动态 Script 标签 本文以 Airi 仓库 .agents/skillsAI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染在 Vue 3 与 AI 桌面应用中优雅加载异步状态useAsyncState 完整实战指南在 Vue 3 与 AI 桌面应用中优雅加载异步状态useAsyncState 完整实战指南 useAsyncState 是 VueUse 提供的一个 StaAI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染上一篇5分钟让你的电视盒子变身全能服务器Armbian系统移植完全指南下一篇Adobe GenP 3.0完整指南3分钟完成Adobe软件优化配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考