vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别

Vue 3.0 引入了 Composition API，这是对 Vue 2.0 中使用的 Options API 的一个补充。Composition API 提供了一种更灵活的方式来组织和重用组件逻辑，而 Options API 则更倾向于在组件实例中直接定义和操作数据和逻辑。

区别说明：

1. 可重用性：在 Options API 中，我们通常在组件内部定义方法和计算属性，这使得它们与特定的组件紧密耦合，难以在其他地方重用。而 Composition API 通过使用?setup?函数和?ref、reactive?等 API，使得逻辑更加模块化，更容易在其他地方重用。
2. 逻辑复用：在 Options API 中，我们通常在?methods、computed?等选项中定义逻辑，这使得这些逻辑与特定的模板紧密耦合。而 Composition API 通过将逻辑抽取到?setup?函数中，使得模板和逻辑分离，逻辑可以在多个组件之间复用。
3. 逻辑的声明方式：在 Options API 中，我们通常在组件的?data、methods、computed?等选项中声明数据和方法。而在 Composition API 中，我们使用?ref、reactive?等 API 来声明响应式的数据，使用?computed?API 来声明计算属性。
4. API 风格：Options API 是一个更类似于对象字面量风格的 API，而 Composition API 则更类似于函数式编程风格的 API。

代码示例：

Options API (Vue 2.x):

export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
computed: {
doubleCount() {
return this.count * 2;
},
},
};

Composition API (Vue 3.x):

import { ref, computed } from 'vue';

export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
const doubleCount = computed(() => count.value * 2);
return { count, increment, doubleCount };
},
};