Vue单文件组件默认只允许一个script块，但Vue 3.2+官方支持双script共存：一个普通script（Options API）和一个setup script（Composition API），二者作用域隔离、可协同工作，适用于迁移过渡等场景。

Vue 单文件组件（.vue）**默认只允许一个 `<script>` 块**，但可以通过特定方式实现“多个 script 标签共存”的效果——本质是利用 Vue 3 的双 `<script>` 语法：一个普通 `<script>` + 一个 `<script setup>`，二者并存于同一文件中。</script>

支持双 script 的语法结构

Vue 3.2+ 正式支持在同一个 `.vue` 文件中同时存在：

• 一个常规 `<script>`（用于 Options API、兼容逻辑、全局配置等）</script>
• 一个 `<script setup>`（用于 Composition API、响应式声明、组合式逻辑）</script>

两者互不干扰，默认作用域隔离。这是 Vue 官方明确支持的写法，不是 hack，也不需要额外插件。

它们如何协同工作

双 script 并非完全独立，可通过以下方式通信或共享能力：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 从 `<script setup>` 向 Options 暴露属性</script>：用 `defineExpose({ ... })` 显式导出变量/方法，供父组件通过 `ref` 或 `$refs` 访问
• 在 `<script>` 中访问 setup 内容</script>：需借助 `getCurrentInstance()` 获取当前实例，再读取 `setupState`（不推荐日常使用，仅限调试或特殊场景）
• 共享顶层声明（如 import）：`<script setup>` 中的 `import` 对 `<script>` 不可见；反之亦然。若需共用工具函数，应提取到独立 JS 模块中再分别导入</script>

典型使用场景

这种共存模式适合过渡期或混合需求：

• 老项目迁移时，保留原有 Options 部分（如 `data()`、`watch`、`filters`），新功能用 `<script setup>` 开发</script>
• 需要在 `beforeCreate` 或 `created` 等早期钩子中执行逻辑（Options 支持，setup 中无直接对应）
• 使用某些仅适配 Options API 的第三方 Vue 插件（如部分旧版表单校验库）

注意事项

虽然技术上可行，但要注意：

• 不能有两个普通 `<script>`，也不能有两个 `<script setup>`；违反会触发编译错误</script>
• 双 script 会增加理解成本和维护难度，建议新项目统一使用 `<script setup>`</script>
• Vue 官方文档强调：两者是“同一套响应式系统下的不同写法”，不是互斥方案，而是可按需组合的工具