vue3.0所采用得Composition Api与Vue2.XOtions Api有什么不同？

Vue 3.0 引入的 Composition API 相较于 Vue 2.x 的 Options API 有显著的不同。下面从几个方面对比这两者的差异：

---

✅ 1. 代码组织方式不同

Vue 2.x — Options API

• 使用 data、methods、computed、watch 等分散的选项组织逻辑。

• 每个功能点分散在不同的选项中，可能导致大型组件难以维护。

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

Vue 3.x — Composition API

• 使用 setup() 函数将相关逻辑聚合在一起，逻辑关注点清晰、复用性更强。

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

---

✅ 2. 代码复用方式不同

Vue 2.x — Options API

• 主要通过 mixins 实现代码复用，但可能会产生命名冲突、不易追踪来源。

Vue 3.x — Composition API

• 使用 自定义 hooks（composables） 复用逻辑，清晰、解耦、强类型支持好。

// useCounter.js
import { ref } from 'vue';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. 类型支持

• Composition API 更加友好地支持 TypeScript，因为它依赖函数和变量声明，而不是框架“魔法”。

• Options API 在类型推导方面较弱。

---

✅ 4. this 关键字使用

• Options API 中大量使用 this，容易引发作用域混淆和错误。

• Composition API 中避免使用 this，一切显式定义，作用域清晰。

---

✅ 5. 生命周期钩子写法不同

生命周期	Vue 2 Options API	Vue 3 Composition API
mounted	mounted()	onMounted(() => {})
created	created()	setup() 阶段处理
beforeDestroy	beforeDestroy()	onBeforeUnmount()

import { onMounted } from 'vue';setup() {onMounted(() => {console.log('组件已挂载');});
}

---

✅ 6. 性能

• Composition API 在 逻辑复用、类型推导、Tree-shaking 上更具优势。

• Vue 3 在底层用 Proxy 替代 Object.defineProperty，性能本身也有提升。

---

✅ 总结对比表：

对比维度	Options API (Vue 2)	Composition API (Vue 3)
逻辑组织	分模块	聚合式
状态定义	data/methods/computed	ref/reactive/computed
代码复用	mixins	composables
类型支持	一般	非常好
作用域	this 上下文绑定	无 this，更清晰
生命周期	对应函数	import 对应钩子使用
学习曲线	容易上手	更灵活但稍复杂

---

如果你是在大型项目、希望更好地复用逻辑或使用 TypeScript，Composition API 更合适；如果是小型项目或团队熟悉 Options API，也可继续使用，Vue 3 仍然支持它。