VueUse中useScriptTag与模块脚本的兼容性问题解析

模块脚本的特殊行为

在VueUse项目中，使用useScriptTag加载带有type="module"属性的脚本时，开发者可能会遇到一个特殊现象：脚本仅在首次加载时执行，后续加载不会重新执行脚本内容。这种现象并非VueUse本身的缺陷，而是浏览器对模块脚本的标准处理方式。

技术背景分析

模块脚本(<script type="module">)与传统脚本有几个关键区别：

1. 默认严格模式：模块脚本自动启用严格模式
2. 单次执行：相同URL的模块脚本只会执行一次
3. CORS限制：模块脚本默认遵循CORS策略
4. 延迟执行：模块脚本默认具有defer属性

当useScriptTag尝试多次加载同一个模块脚本时，浏览器会识别URL相同而跳过重复执行，这是符合ES模块规范的设计。

解决方案探讨

针对这个问题，开发者社区形成了两种主流解决方案：

1. URL参数法

通过添加随机查询参数强制浏览器重新加载：

const scriptUrl = `https://example.com/module.js?v=${Date.now()}`

这种方法简单直接，但会完全重新下载脚本，可能影响性能。

2. 全局状态管理法

更优雅的解决方案是让模块脚本暴露API接口，通过调用这些接口来"重新执行"功能：

// 模块脚本中
window.myModuleAPI = {
  init: () => { /* 初始化逻辑 */ }
}

// 使用方代码
window.myModuleAPI.init()

这种方法避免了重复加载，更符合模块化设计原则。

VueUse的最佳实践

对于VueUse用户，建议采用以下模式：

1. 对于需要重复初始化的模块，设计明确的初始化API
2. 将模块脚本的加载与业务逻辑解耦
3. 考虑使用Nuxt等框架提供的专用脚本处理方案

总结

理解模块脚本的特殊行为对于现代前端开发至关重要。虽然useScriptTag提供了便捷的脚本加载能力，但在模块脚本场景下需要开发者额外注意执行机制。通过合理的设计模式，可以既享受模块化的优势，又满足动态加载的需求。