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

vue3学习日记(十四)：两大API选型指南

news 2025/9/18 13:40:52

Vue3 两大核心 API 详解

Vue3 的核心 API 分为 Options API 和 Composition API，两者设计理念不同，但可协同使用。

Options API

定义：基于对象声明的传统 Vue 写法，通过 data、methods、computed 等选项组织代码。

核心特性：

结构化清晰：逻辑按选项分类（如 data 存放数据，methods 存放方法）。
易于上手：对新手友好，学习曲线平缓。
向下兼容：Vue3 完全支持 Vue2 的写法。

使用场景：

适合中小型项目或简单逻辑组件
团队熟悉 Vue2 的迁移过渡期
需要快速上手的场景

优点：

结构清晰，代码按功能选项（如 data、methods）分类。
学习曲线平缓，适合新手。

缺点：

逻辑分散，复杂组件中代码可能难以维护。
逻辑复用依赖 mixins，可能引发命名冲突。

基本用法：

<template><div>{{ count }}</div><button @click="increment">+1</button>
</template><script>
export default {data() {return { count: 0 }},methods: {increment() {this.count++}}
}
</script>

Composition API

定义：基于函数式编程的 API，通过 setup() 函数和响应式 API 组织代码。

核心特性：

逻辑复用：通过自定义 Hook（如 useFetch）实现逻辑的封装和复用。
代码组织：将相关逻辑集中在一个地方，而非分散在 data、methods、computed 等选项中。
更好的 TypeScript 支持：函数式风格更易于类型推导。

使用场景：

复杂组件逻辑需要高复用性
TypeScript 深度集成需求
需要逻辑关注点集中的大型项目

优点：

逻辑聚合，相关代码可以集中编写。
更好的逻辑复用（通过自定义组合函数）。
更好的 TypeScript 集成。

缺点：

学习成本较高，需要理解响应式系统。
简单场景下可能显得冗余。

基本用法：

<template><div>{{ count }}</div><button @click="increment">+1</button>
</template><script>
import { ref } from 'vue'
export default {setup() {const count = ref(0)const increment = () => count.value++return { count, increment }}
}
</script>

核心函数：

ref() / reactive() 创建响应式数据
computed() 创建计算属性
watch() / watchEffect() 实现侦听
生命周期钩子前缀加 on（如 onMounted）

选型建议

项目规模与复杂度
- 小型项目或简单 UI 组件：优先使用 Options API。
- 大型项目或复杂逻辑：选择 Composition API。
团队经验
- 团队熟悉 Vue 2：可逐步过渡到 Composition API。
- 新团队或全新技术栈：直接学习 Composition API。
逻辑复用需求
- 需要高度复用逻辑（如状态管理、工具函数）：Composition API 更灵活。
TypeScript 支持
- 需要强类型检查时，Composition API 更具优势。

典型场景对比

逻辑复用示例：

// Composition API 复用逻辑
function useCounter(initialValue) {const count = ref(initialValue)const double = computed(() => count.value * 2)const increment = () => count.value++return { count, double, increment }
}// Options API 需通过 mixins 实现
const counterMixin = {data() {return { count: 0 }},methods: {increment() {this.count++}}
}

TypeScript 支持：

// Composition API 类型推断更直接
interface Counter {count: Ref<number>increment: () => void
}function useCounter(): Counter {const count = ref(0)const increment = () => count.value++return { count, increment }
}