如何在Vue.js中添加外部脚本 能否通过computed或@click方法实现

核心结论 #

• computed 计算属性完全无法实现外部脚本注入需求，不要尝试用这种方式
• 给元素绑定@click事件、在事件回调里注入脚本的方式完全可行，适合按需加载脚本的场景

为什么computed不能用 #

computed的设计初衷是基于响应式依赖返回计算后的状态值，本身不承担DOM操作职责：

1. 就算你在computed里拼接好了script标签的HTML字符串，Vue模板默认会对插值内容做HTML转义，标签会被当成普通文本渲染，不会被解析
2. 哪怕用v-html强制渲染HTML内容，Vue出于XSS安全防护也会自动过滤掉script标签，脚本根本不会执行

正确实现方式 #

1. 组件/页面加载时自动引入

如果不需要交互、进入页面就要加载脚本，在组件挂载生命周期里手动创建script标签插入DOM即可：

<!-- Vue3 组合式API示例 -->
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 先判断脚本是否已经存在，避免重复加载
  if (document.getElementById('id')) return
  const scriptEl = document.createElement('script')
  scriptEl.id = 'id' // 和你原有脚本的id属性保持一致
  scriptEl.src = 'link' // 替换为实际的脚本地址
  scriptEl.async = true
  // 可选：监听加载状态
  scriptEl.onload = () => {
    // 脚本加载完成后可以调用脚本暴露的全局方法
    console.log('外部脚本加载完成')
  }
  scriptEl.onerror = () => {
    console.error('脚本加载失败')
  }
  document.body.appendChild(scriptEl)
})
</script>

如果是Vue2选项式API，把上述逻辑写在mounted生命周期钩子中即可，逻辑完全一致。

注意：不要直接在Vue模板的<template>标签里硬写script标签，Vue编译模板时会自动过滤模板内的script标签，不会生效。

2. 点击触发按需加载（@click实现）

如果需要用户触发交互后再加载脚本，直接把脚本注入逻辑写在@click绑定的事件函数里即可：

<template>
  <button @click="handleLoadScript">点击加载外部脚本</button>
</template>

<script setup>
const handleLoadScript = () => {
  if (document.getElementById('id')) return
  const scriptEl = document.createElement('script')
  scriptEl.id = 'id'
  scriptEl.src = 'link'
  scriptEl.async = true
  document.body.appendChild(scriptEl)
}
</script>

补充注意事项 #

• 注入脚本前一定要做存在性判断，避免用户重复点击/组件重复挂载导致同一个脚本被多次加载
• 如果要调用脚本暴露的全局变量/方法，建议放在onload回调里执行，避免因脚本未加载完成报"未定义"错误
• 如果是单页应用，最好在组件卸载时移除你注入的script标签，避免离开页面后全局变量残留

内容的提问来源于stack exchange，提问作者f0.c