Vue 3 中 setup 和 Options API 不能在同一个组件中混合使用，因为一旦定义 setup()，Options API 的 data、methods 等将被完全忽略且不报错；混用会导致响应式失效、生命周期不触发，破坏逻辑复用与关注点分离的设计初衷。
Vue 3 中 setup 和 Options API 不能在同一个组件中混合使用 —— 这是 Vue 官方明确禁止的。一旦你定义了 setup() 函数（无论是返回对象还是使用 defineComponent + setup），该组件就进入了 Composition API 模式，此时 data、methods、computed、watch 等 Options API 选项将被忽略，不会执行，也不会报错，但完全失效。
为什么不能混用？
Vue 3 的组件初始化逻辑做了重构：
- 有
setup()时，Vue 会跳过 Options API 的响应式数据初始化（data）、生命周期钩子注册（mounted等）和选项解析流程； -
setup()是组件实例创建前最早执行的函数，它负责提前提供响应式状态、逻辑封装和模板绑定能力； - 混用会导致行为不可预测（比如
data不响应、watch不触发），且破坏 Composition API 的设计初衷：逻辑复用与关注点分离。
如何平滑迁移旧项目？
如果你正在从 Vue 2 升级到 Vue 3，并希望逐步改造，推荐以下策略：
-
组件级别隔离：新功能或新组件统一用
setup+ref/reactive编写；旧组件暂时保留 Options API，不加setup； -
用
defineComponent包裹 Options 风格代码（兼容 TypeScript 类型推导，但仍是纯 Options）：
<script>
import { defineComponent } from 'vue'
export default defineComponent({
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
})
</script> -
渐进引入 Composition API：在 Options 组件中通过
setup()外部调用逻辑（如自定义 Hook），但不用于定义组件主体状态 —— 注意：这仅适用于封装可复用逻辑，而非替代 data/methods。
常见误解澄清
-
“setup 里可以写 data 或 methods” → 错误。
setup返回的是模板上下文，不是 Options 替代写法；data应用ref或reactive声明，methods对应普通函数； -
“用
setup同时保留mounted” → 不生效。必须改用onMounted(() => {...})； - “Options API 在 Vue 3 中被废弃” → 不准确。它仍被完全支持（包括 Vue 3.4+），只是 Composition API 成为主推模式，尤其对复杂逻辑和 TS 友好。
总结建议
不要试图在单个组件内“组合”setup 和 Options API。选择一种风格并坚持到底：新项目用 Composition API；老项目升级时按组件粒度分批重写，借助 Vue Devtools 和 ESLint 插件（如 eslint-plugin-vue）识别潜在混用风险。两者本质是不同架构范式，强行共存只会增加维护成本。
立即学习“前端免费学习笔记（深入）”；
