选项式api和组合式api
概念对比
- 选项式 API（Options API）：用 data / computed / methods / watch / mounted 等“配置项”组织代码，逻辑按“类型”分组，易读、上手快。
- 组合式 API（Composition API）：在 setup() 或 <script setup> 中用 ref / reactive / computed / watch / onMounted 等“函数”组织代码，逻辑按“功能”分组，复用更强、类型更友好。
写法对比（同一功能）
Options API
<script lang="ts">
export default {data() {return { count: 0 }},computed: {double() { return this.count * 2 }},methods: {inc() { this.count++ }},mounted() {console.log('mounted')}
}
</script>Composition API（<script setup>）
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'const count = ref(0)
const double = computed(() => count.value * 2)
function inc() { count.value++ }onMounted(() => console.log('mounted'))
</script>核心区别
- 组织方式
- 选项式：按“数据/计算/方法/生命周期”分散在不同块。
- 组合式：把同一业务逻辑的相关变量与函数放在一起，模块化更好（useXxx 组合函数）。
- this 使用
- 选项式：通过 this 访问实例数据与方法。
- 组合式：无需 this，直接用变量；利于类型推断与重构。
- 类型推断
- 选项式：this 的类型在 TS 下相对弱，需额外声明。
- 组合式：天然与 TS 友好，局部变量类型清晰。
- 复用与抽离
- 选项式：复用常依赖 mixin（命名冲突、来源不清）。
- 组合式：提取为 useXxx 组合函数，依赖清晰、可测试。
- 学习曲线
- 选项式：对初学者更直观。
- 组合式：概念略多，但中大型项目更受益。
响应式对比
- 选项式：data() 返回的属性自动转为响应式。
- 组合式：用 ref/ reactive 显式创建响应式；原始变量不是响应式（你项目中的 setup 示例就演示了这点）。
生命周期对比
- 选项式：created / mounted / updated / unmounted 等。
- 组合式：onMounted / onUpdated / onUnmounted 等，在 setup() 内调用。
何时选择
- 选项式 API 优先：小型/演示项目、团队以 Vue2 背景为主、逻辑简单。
- 组合式 API 优先：中大型项目、强 TS 需求、需要抽离复用逻辑、复杂状态管理与副作用控制。
可以混用吗？
- 可以在同一组件里混用（如你 Person.vue 里既有 Options 又有 setup），但实际项目建议“以一种为主”，保持风格统一。
实战建议
- 新项目推荐使用 <script setup> + 组合式 API 为主；老项目渐进式引入，在公共逻辑中抽 useXxx 组合函数。
- 如果团队成员多为 Vue2 经验且业务简单，选项式也完全可行。