Vue 3 的选项式 API（Options API）和组合式 API（Composition API）的根本区别在于代码组织逻辑的范式不同，核心差异可以总结为以下几点：

1. 代码组织方式

选项式 API：

基于选项对象的结构，将代码按功能类型（如 data、methods、computed、生命周期等）分割到不同的选项中。

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  },
  mounted() { console.log('组件挂载'); }
}

问题：当组件复杂时，同一功能的逻辑可能分散在不同选项中，维护时需要上下跳转。

组合式 API：

基于函数的组合，将同一功能的逻辑集中在一个作用域内（通常在 setup或 <script setup>中）。

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++; };
    onMounted(() => { console.log('组件挂载'); });
    return { count, increment };
  }
}

优势：逻辑关注点集中，便于提取和复用（尤其是自定义 Hook）。

2. 逻辑复用机制

选项式 API：

通过 mixins​ 或 混入​ 复用逻辑，但容易导致命名冲突、数据来源不透明。

const myMixin = {
  data() { return { mixinData: 1 }; }
};
export default { mixins: [myMixin] };

组合式 API：

通过 自定义 Hook（函数）​ 复用逻辑，利用函数作用域隔离状态。

// useCounter.js
export function useCounter() {
  const count = ref(0);
  const increment = () => { count.value++; };
  return { count, increment };
}

// 组件中使用
import { useCounter } from './useCounter';
export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}

3. 响应式数据的声明

选项式 API：

通过 data()返回对象，Vue 自动将其转为响应式，但无法灵活拆分或动态创建。

data() { return { count: 0 }; }

组合式 API：

显式使用 ref或 reactive声明响应式数据，更灵活（如动态创建响应式对象）。

const count = ref(0);       // 基本类型
const state = reactive({    // 对象
  name: 'Vue',
  value: 3
});

4. this的绑定

选项式 API：

依赖 this访问组件实例的属性和方法（如 this.count），但类型推导困难（TypeScript 支持较差）。

组合式 API：

无需 this，直接通过变量和函数操作状态，类型推导更友好（适合 TypeScript）。

5. 适用场景

选项式 API：

• 适合简单组件或新手，结构直观。

• 需要快速上手的项目。

组合式 API：

• 适合复杂组件或大型项目，逻辑复用性强。

• 需要 TypeScript 支持或团队协作的场景。

6.总结

组合式 API 的本质是用函数组合代替选项分割，提供了更灵活的代码组织和复用能力，而选项式 API 保留了 Vue 2 的惯性，适合从旧项目迁移或简单场景。