摘要
Vue3 引入的组合式 API（Composition API）相比 Vue2 的选项式 API（Options API），在逻辑复用、代码组织、可维护性方面更加灵活。
# 一、什么是组合式 API？
Vue2 采用的是选项式 API，开发者需要按照 data、methods、watch、computed 等选项来组织代码。而 Vue3 的组合式 API，让开发者可以基于功能逻辑的归类，自由组织代码。
# 二、组合式 API 的核心概念
- setup 函数：Vue3 组件的核心入口，用于定义响应式数据、方法、生命周期等。
- reactive 和 ref：用于创建响应式数据。
- computed 和 watch：计算属性和监听数据变化。
- 生命周期钩子：如
onMounted、onUpdated，取代 Vue2 的mounted、updated。
# 三、代码对比示例
# Vue2 选项式 API 示例
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
}
</script>
# Vue3 组合式 API 示例
<template>
<div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>
# 四、组合式 API 的优势
- 逻辑更加清晰：将数据、方法、计算属性等按逻辑分组，避免 Vue2 的
this作用域问题。 - 更好的代码复用性：使用
setup+composable方式可以轻松复用功能。 - 性能优化：Vue3 在
setup阶段提前解析逻辑，减少运行时开销。
# 结论
组合式 API 是 Vue3 的核心特性之一，适用于复杂项目的逻辑拆分和优化，推荐在新项目中优先采用。