当前位置：首页 > news >正文

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

news 2025/7/1 11:16:01

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 对应钩子使用
学习曲线	容易上手	更灵活但稍复杂