Vue.js组件中添加外部JS脚本的其他实现方式咨询

首先明确：computed 属性完全不适合用来实现外部脚本加载逻辑，原因后面会说明，先讲所有可落地的实现路径：

1. 优化当前mounted生命周期内的原生DOM加载逻辑 #

你现在写的动态创建脚本的思路本身是可行的，但缺少必要的鲁棒性处理，优化后可以避免重复加载、内存泄漏问题：

mounted() {
  // 先判断脚本是否已存在，避免重复插入
  const existedScript = document.querySelector('script[src="www.domain.com/assets/demo.js"]')
  if (!existedScript) {
    const spotlighterScript = document.createElement('script')
    spotlighterScript.src = 'www.domain.com/assets/demo.js'
    // 补充加载状态回调
    spotlighterScript.onload = () => {
      // 脚本加载完成后再执行依赖它的业务逻辑
    }
    spotlighterScript.onerror = () => {
      console.error('外部脚本加载失败')
    }
    document.head.appendChild(spotlighterScript)
    // 存脚本引用，方便后续清理
    this._customScript = spotlighterScript
  }
},
// 组件卸载时清理自定义插入的脚本
beforeUnmount() {
  if (this._customScript) {
    document.head.removeChild(this._customScript)
    this._customScript = null
  }
}

2. 封装通用脚本加载工具，按需在任意时机调用 #

把动态加载脚本的逻辑抽成独立的公共方法，不用硬绑定在mounted钩子里，不管是组件挂载、按钮点击、路由前置钩子等任意时机，需要加载脚本的时候直接调用即可：

// 抽离的公共工具方法
export function loadExternalScript(src) {
  return new Promise((resolve, reject) => {
    // 全局缓存已加载的脚本，跨组件复用
    if (window._globalLoadedScripts?.[src]) {
      return resolve()
    }
    const script = document.createElement('script')
    script.src = src
    script.onload = () => {
      window._globalLoadedScripts = window._globalLoadedScripts || {}
      window._globalLoadedScripts[src] = true
      resolve()
    }
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// 组件内使用示例：
// 不需要等mounted，比如点击按钮触发加载时直接调用
methods: {
  async handleLoadScript() {
    await loadExternalScript('www.domain.com/assets/demo.js')
    // 脚本加载完成后执行业务逻辑
  }
}

3. 全局静态引入 #

如果这个外部脚本是全项目通用的，不存在单个组件按需加载的需求，直接在项目入口的index.html文件里写常规的<script>标签引入即可，不需要任何动态创建逻辑，维护成本更低。 #

为什么不能在computed中实现脚本加载逻辑？

• computed的核心设计是同步计算响应式派生值，本身不允许执行DOM操作、异步请求这类带副作用的逻辑，违背API设计初衷
• computed会在依赖的响应式值变化时自动重复执行，把DOM插入逻辑放进去会导致只要依赖值变动就重复插入脚本，完全达不到加载目的
• computed的执行时机在组件渲染阶段，这时候手动操作DOM插入节点，可能打断正常的组件渲染流程，引发未知异常

内容的提问来源于stack exchange，提问作者Myles