Vue 3 允许一个 .vue 文件中存在多个 <script> 标签，但有且仅有一个可带 setup 属性，本质是 Options API 与 Composition API 分工协作；常见合法共存方式有三种：同一文件双 <script> 标签混用、<script setup> 中用 defineOptions 声明配置、跨组件混合使用。
Vue 3 允许一个 .vue 文件中存在多个 <script> 标签，但有且仅有一个可以带 setup 属性。所谓“多个 script 标签共存”，本质是Options API 和 Composition API 在同一组件内分工协作，而不是随意并列写两个 setup。
常见且合法的共存方式就三种，每种都有明确用途和限制：
同一文件双 <script> 标签（最典型混用）
- 一个普通
<script>写 Options 配置（如name、props类型声明、emits、inheritAttrs等） - 一个
<script setup>写逻辑（响应式数据、函数、生命周期钩子等）
<script>
export default {
name: 'UserProfile',
inheritAttrs: false,
emits: ['update:email']
}
</script>
<script setup>
import { ref, defineEmits } from 'vue'
const email = ref('')
const emit = defineEmits(['update:email'])
const updateEmail = () => emit('update:email', email.value)
</script>
<template>
<input v-model="email" @change="updateEmail" />
</template>⚠️ 注意：两个 <script> 之间默认不共享变量或函数。Options 部分无法直接访问 setup 里的 email，反之亦然。如需通信，必须通过标准机制：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
expose+getCurrentInstance()暴露内部方法给父组件调用 -
defineProps/defineEmits声明接口，而非依赖this - 不推荐在 Options 里写
data()或methods并试图与setup变量联动
<script setup> 中用 defineOptions 声明 Options 配置
- 所有 Options 式配置（
name、props、emits、inheritAttrs、甚至data和methods）可写在defineOptions({})里 - 这些配置与
setup内部变量同作用域，可直接交互（比如data()返回的对象能用ref或reactive替代）
<script setup>
import { ref } from 'vue'
defineOptions({
name: 'SearchBox',
inheritAttrs: false
})
const query = ref('')
const reset = () => query.value = ''
</script>✅ 优势：简洁、无隔离、适合轻量封装；
❌ 限制：data()、methods 等写法会失去类型推导和响应式自动解包优势，不推荐复杂逻辑。
跨组件混合使用（最安全、最推荐）
- 父组件用
<script setup>，子组件用 Options API（或反过来） - 完全无作用域冲突，通信只走
props/emits/v-model/provide/inject - 特别适合渐进式迁移旧项目，或集成第三方 Options 组件
<!-- Parent.vue --> <script setup> import LegacyTable from './LegacyTable.vue' // Options 组件 </script> <template> <LegacyTable :data="rows" @row-click="handleClick" /> </template>
✅ 完全解耦，零兼容风险；
✅ IDE 支持好，类型检查清晰；
✅ 是 Vue 官方文档隐含推荐的过渡策略。
不需要额外插件就能实现这些方式。如果想省掉第一个 <script>（只为写 name），可用 vite-plugin-vue-setup-extend 插件，在 setup 标签上直接加 name 属性：
立即学习“前端免费学习笔记（深入）”；
<script setup name="UserCard"> // ... </script>
本质上，Vue 3 的设计哲学不是“强制统一”，而是“组合优先、兼容并包”。多个 script 共存不是为了炫技，而是为了解决真实场景：命名、类型声明、继承控制、遗留组件整合——把该放 Options 的放 Options，该放 setup 的放 setup，各司其职即可。
