一个Vue3组件中能写几个script标签？

Question

在一个 Vue3 单文件组件（SFC）中，是否可以编写多个 `<script></script>

Answer 1

1. 基本语法与 Vue3 SFC 的结构规范

在 Vue3 的单文件组件（SFC）中，<script> 标签用于定义组件的逻辑部分。根据 Vue 官方文档，一个 SFC 理论上可以包含多个 <script> 标签，但存在严格限制。

• 普通 <script> 和 <script setup> 不能共存于同一组件中。
• 最多只允许一个 <script> 或一个 <script setup> 标签。
• 若同时声明两者，Vite 或 Vue Compiler 将抛出编译错误：Cannot have both <script> and <script setup> in the same component。

<!-- ❌ 错误示例：同时使用两种 script 标签 -->
<script>
  export default { name: 'BadComponent' }
</script>

<script setup>
  const msg = 'Hello'
</script>

2. 编译机制与执行顺序解析

Vue SFC 经过 @vitejs/plugin-vue 或 vue-loader 处理时，会将模板、脚本和样式分别解析并合成一个 ES 模块。其处理流程如下：

1. 解析所有顶层标签（template, script, style）。
2. 识别是否存在 <script setup> —— 若有，则忽略普通 <script>。
3. 若仅存在普通 <script>，则按标准模块方式导出组件选项。
4. 多个 <script> 被视为语法错误，编译器直接中断。

Script 类型组合	是否允许	编译结果
<script> + <script>	❌ 不允许	Syntax Error
<script setup> + <script setup>	❌ 不允许	Duplicate setup script
<script> + <script setup>	❌ 不允许	Conflict detected
仅 <script>	✅ 允许	Options API 输出
仅 <script setup>	✅ 允许	Composition API 自动展开

3. 作用域与模块导入的影响分析

当使用 <script setup> 时，其内部变量默认具有“顶层作用域”，即自动暴露给模板使用，无需返回。而普通 <script> 需通过 setup() 函数显式返回才能在模板中访问。

<!-- ✅ 正确：仅使用 script setup -->
<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  // 自动可用在 template 中
</script>

<template>
  <div @click="count++">{{ count }}</div>
</template>

若尝试拆分逻辑到多个 <script> 标签以实现模块化，如：

<!-- ❌ 无法实现的设想 -->
<script>import utils from './utils.js'</script>
<script setup>const data = useLogic(utils)</script>

这种写法会导致编译失败，因为每个 SFC 只能有一个脚本入口点。

4. 逻辑复用与替代方案设计

虽然不能使用多个 <script> 标签，但可通过以下方式实现高阶逻辑组织：

• Composables 函数：将可复用逻辑封装为独立函数，如 useMouse()、useApi()。
• TS 类型增强：利用 <script setup lang="ts"> 实现类型推导优化。
• 动态导入：延迟加载复杂逻辑模块，提升性能。

graph TD A[Vue SFC] --> B{Has <script setup>?} B -->|Yes| C[Parse setup script] B -->|No| D[Parse normal script export] C --> E[Auto expose top-level bindings] D --> F[Require setup() or exported options] E --> G[Template access variables directly] F --> H[Must return reactive refs in setup()]

5. 类型系统与 TypeScript 协同挑战

在使用 lang="ts" 时，多脚本标签的缺失对类型推导并无负面影响，反而促使开发者更规范地组织类型依赖。

<script setup lang="ts">
  interface User {
    id: number
    name: string
  }

  const user = ref<User | null>(null)
  const fetchUser = async (): Promise<void> => {
    user.value = await api.getUser()
  }
</script>

所有类型声明均在同一作用域内有效，避免了跨脚本类型断裂问题。这也符合现代前端工程中“单一责任原则”——一个组件一个逻辑入口。

6. 工程实践中的高级模式探索

尽管语法层面禁止多 script 标签，但在构建工具链中仍可借助预处理器或宏实现“逻辑分割”：

• Vite 插件预处理：自定义插件合并多个内联 script 片段。
• Macro 工具：如 unplugin-vue-macros 支持 <script extra> 等扩展语法。
• 代码生成：结合 AST 操作，在构建时注入辅助逻辑。

例如：

// vite.config.ts
import vueMacros from 'unplugin-vue-macros/vite'

export default defineConfig({
  plugins: [
    vueMacros({
      hoistStatic: true,
      setupBlock: true // 允许 <script setup> 和额外逻辑块
    })
  ]
})