面试题：Vue 3 中的 Composition API 与 Vue 2.x 的 Options API 有什么区别？

Vue 3 引入了 Composition API，作为对 Vue 2.x 的 Options API 的补充和增强。以下是两者的主要区别：

1. 代码组织方式

Options API

基于选项：将组件的逻辑分散到不同的选项中，如 data、methods、computed、watch 等。
适合简单组件：对于小型组件，Options API 的代码结构清晰易读。

Composition API

基于逻辑：将相关逻辑组织在一起，而不是分散到不同的选项中。
适合复杂组件：对于大型组件，Composition API 可以更好地组织代码，提升可维护性。

2. 逻辑复用

Options API

混入（mixin）：通过 mixins 复用逻辑，但容易导致命名冲突和代码难以追踪。
作用域插槽：通过作用域插槽复用逻辑，但代码结构复杂。

Composition API

自定义 Hook：通过自定义 Hook 复用逻辑，代码更清晰且易于维护。
更好的 TypeScript 支持：Composition API 天然支持 TypeScript，类型推断更友好。

3. 响应式系统

Options API

基于 data：响应式数据定义在 data 选项中。
局限性：无法在组件外部定义响应式数据。

Composition API

基于 ref 和 reactive：可以在任何地方定义响应式数据。
更灵活：支持将响应式逻辑提取到独立的函数中。

4. 生命周期钩子

Options API

固定的生命周期钩子：如 created、mounted、updated 等。
局限性：生命周期钩子分散在组件选项中。

Composition API

动态的生命周期钩子：通过 onMounted、onUpdated 等函数动态注册生命周期钩子。
更灵活：可以在任何地方注册生命周期钩子。

5. TypeScript 支持

Options API

类型推断有限：Options API 的类型推断较弱，尤其是在使用 this 时。
需要额外配置：需要借助 vue-class-component 或 vue-property-decorator 增强 TypeScript 支持。

Composition API

天然支持 TypeScript：Composition API 的设计更适合 TypeScript，类型推断更强大。
更少的 this 使用：减少了对 this 的依赖，类型推断更准确。

6. 示例对比

Options API

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

Composition API

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      increment,
    };
  },
};

7. 适用场景

Options API

小型项目：适合逻辑简单、代码量少的项目。
初学者：对于初学者来说，Options API 更直观易学。

Composition API

大型项目：适合逻辑复杂、需要高度复用的项目。
TypeScript 项目：Composition API 天然支持 TypeScript，适合需要强类型检查的项目。

8. 总结

特性	Options API	Composition API
代码组织	基于选项，逻辑分散	基于逻辑，逻辑集中
逻辑复用	混入（mixin）	自定义 Hook
响应式系统	基于 `data`	基于 `ref` 和 `reactive`
生命周期钩子	固定的生命周期钩子	动态注册生命周期钩子
TypeScript 支持	类型推断有限	天然支持 TypeScript
适用场景	小型项目、初学者	大型项目、TypeScript 项目