选项式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 经验且业务简单，选项式也完全可行。