Vue组件中在destroyed()回调清理mounted()挂载脚本的问题

你的思路方向是对的——动态加载脚本+生命周期清理，但问题出在缺少脚本的唯一标识和重复加载的校验，算不上完全错误，只是没补全关键细节～

核心问题拆解 #

1. 脚本无唯一ID：destroyed钩子中无法精准定位要删除的脚本元素，导致清理失败，后续组件挂载时重复插入脚本
2. 无重复加载校验：每次mounted都直接插入脚本，即使脚本已经存在于DOM中，造成冗余加载

最优实现方案 #

方案1：封装带标识的动态脚本加载工具（推荐） #

把脚本加载逻辑封装成可复用的函数，加入ID校验和清理逻辑，避免重复加载：

// 工具函数：动态加载/移除脚本
const scriptManager = {
  loadScript(src, id) {
    // 先检查是否已存在该脚本
    if (document.getElementById(id)) {
      return Promise.resolve();
    }
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.id = id;
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  },
  removeScript(id) {
    const script = document.getElementById(id);
    if (script) {
      document.body.removeChild(script);
    }
  }
};

// 在Vue组件中使用
export default {
  mounted() {
    // 加载时指定唯一ID，比如组件名+脚本标识
    scriptManager.loadScript('你的脚本URL', 'component-specific-script')
      .then(() => {
        // 脚本加载完成后的逻辑
      });
  },
  destroyed() {
    // 通过ID精准移除脚本
    scriptManager.removeScript('component-specific-script');
  }
};

方案2：利用Vue的keep-alive缓存组件（适合频繁切换的场景） #

如果你的组件需要频繁切换，不想每次都销毁/重建，可以用<keep-alive>包裹组件，配合activated和deactivated钩子替代mounted和destroyed：

<!-- 父组件中包裹keep-alive -->
<keep-alive>
  <YourComponent v-if="showComponent" />
</keep-alive>

// 子组件中使用
export default {
  activated() {
    // 组件激活时加载脚本（仅第一次激活时加载，后续激活不重复执行）
    if (!document.getElementById('component-specific-script')) {
      scriptManager.loadScript('你的脚本URL', 'component-specific-script');
    }
  },
  deactivated() {
    // 组件失活时可选择是否移除脚本，根据业务需求决定
    // scriptManager.removeScript('component-specific-script');
  }
};

方案3：全局脚本管理（适合多个组件共用的脚本） #

如果脚本是多个组件共用的，可以在全局层面管理脚本的加载状态，避免重复加载：

// 全局脚本状态记录
window.loadedScripts = window.loadedScripts || new Set();

const loadGlobalScript = (src, id) => {
  if (window.loadedScripts.has(id)) return Promise.resolve();
  return scriptManager.loadScript(src, id).then(() => {
    window.loadedScripts.add(id);
  });
};

关键注意点 #

• 脚本ID必须唯一：可以用组件名+脚本文件名的组合，比如UserProfile-chart-script，避免和其他组件的脚本冲突
• 清理时机：如果脚本是组件专属的，一定要在destroyed（或unmounted，Vue3中）钩子中移除；如果是全局共用的，可选择不清理，或在全局销毁时清理
• 异步处理：脚本加载是异步的，要确保在脚本加载完成后再执行依赖它的逻辑，避免报错

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