Vue 3 引入 Composition API 的原因主要是为了更好地解决以下几个问题：

1. 更好的代码组织和重用

在 Vue 2 中，使用选项式 API（Options API）来定义组件的逻辑，通常将数据、方法、计算属性和生命周期钩子分开写在不同的配置对象中。当组件变得复杂时，不同功能的代码可能会散落在各个部分，难以维护和重用。

示例：

复制
1// Vue 2 中使用 Options API
2export default {
3  data() {
4    return {
5      count: 0,
6      message: 'Hello World'
7    };
8  },
9  computed: {
10    doubleCount() {
11      return this.count * 2;
12    }
13  },
14  methods: {
15    increment() {
16      this.count++;
17    }
18  },
19  created() {
20    console.log(this.message);
21  }
22};

通过 Composition API，可以将相关功能的逻辑组织在一起，从而提高代码的可读性和可维护性。

示例：

复制
1// Vue 3 中使用 Composition API
2import { ref, computed, onMounted } from 'vue';
3
4export default {
5  setup() {
6    const count = ref(0);
7    const message = ref('Hello World');
8    
9    const doubleCount = computed(() => count.value * 2);
10    
11    const increment = () => {
12      count.value++;
13    };
14    
15    onMounted(() => {
16      console.log(message.value);
17    });
18    
19    return {
20      count,
21      doubleCount,
22      increment,
23      message
24    };
25  }
26};

2. 更好的逻辑复用

在 Vue 2 中，逻辑复用主要通过 mixins 和 scoped slots 实现，但它们都有一些缺点，比如命名冲突和代码可读性差。

Composition API 通过组合函数（composable functions）来实现逻辑复用，这些函数可以在多个组件之间共享和复用逻辑，避免了 mixins 的缺点。

示例：

复制
1// 一个组合函数，可以在多个组件中复用
2import { ref, onMounted } from 'vue';
3
4export function useMessage() {
5  const message = ref('Hello World');
6  
7  onMounted(() => {
8    console.log(message.value);
9  });
10  
11  return {
12    message
13  };
14}

在组件中使用：

复制
1import { ref } from 'vue';
2import { useMessage } from './useMessage';
3
4export default {
5  setup() {
6    const count = ref(0);
7    const { message } = useMessage();
8    
9    const increment = () => {
10      count.value++;
11    };
12    
13    return {
14      count,
15      message,
16      increment
17    };
18  }
19};

3. 更好的 TypeScript 支持

Composition API 天然地支持 TypeScript，使得类型推断和类型检查更为自然和方便。相比于 Options API，通过 Composition API 定义的逻辑更容易进行类型声明和类型推断，提升了开发体验。

示例：

复制
1import { ref, computed } from 'vue';
2
3export default {
4  setup() {
5    const count = ref<number>(0);
6    const doubleCount = computed<number>(() => count.value * 2);
7    
8    const increment = (): void => {
9      count.value++;
10    };
11    
12    return {
13      count,
14      doubleCount,
15      increment
16    };
17  }
18};

4. 适应函数式编程趋势

Composition API 借鉴了函数式编程的思想，将逻辑封装成函数，使得代码更加简洁、模块化、可测试，同时也更符合现代 JavaScript 开发趋势。

总结

Vue 3 引入 Composition API 主要是为了提升代码组织和复用性、提供更好的 TypeScript 支持、适应函数式编程趋势，并且解决 Vue 2 中存在的一些问题。通过 Composition API，可以让组件逻辑更加清晰、灵活和易于维护。