首页
/ 正文

Vue3 组合式 API（超详细）

更新时间: 2025-04-15 16:54:20

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言

在前端开发领域，Vue.js 作为最受欢迎的框架之一，不断通过版本迭代优化开发体验。Vue3 的发布不仅带来了性能提升，更通过 组合式 API（Composition API） 引发了一场开发范式的变革。对于编程初学者和中级开发者而言，组合式 API 的学习曲线可能略显陡峭，但它能显著提升代码的可维护性和复用性。本文将通过循序渐进的方式，结合实际案例，深入解析组合式 API 的核心概念与应用场景，并对比选项式 API 的差异，帮助读者建立系统的理解。

组合式 API 的核心思想：模块化与逻辑复用

什么是组合式 API？

组合式 API 是 Vue3 推出的一种编程范式，其核心是将组件的逻辑（如响应式数据、生命周期、计算属性等）拆分为独立的函数或模块，通过组合（Composition）的方式组织代码。与传统的选项式 API（Options API）不同，组合式 API 强调 “以功能为中心” 的开发模式，而非以“组件选项”为中心。

比喻：
可以将组合式 API 想象为乐高积木。每个函数或模块就像一块积木，开发者可以根据需求自由组合这些“积木”，构建出复杂的逻辑结构。例如，一个表单验证功能可以封装成一个函数，后续在多个组件中直接调用，无需重复编写代码。

为什么需要组合式 API？

选项式 API 虽然直观，但在大型项目中存在以下痛点：

逻辑分散：同一功能可能分散在多个选项（如 methods、computed）中，难以集中管理。
复用困难：组件间共享逻辑需要通过 Mixins 或高阶组件实现，容易导致命名冲突和代码混乱。
可读性差：随着组件复杂度增加，开发者需要不断在不同选项间跳转，理解代码逻辑。

组合式 API 通过以下优势解决这些问题：

逻辑集中化：将相关功能封装在 setup() 函数中，代码结构更清晰。
高复用性：通过函数或自定义 Hook（如 useFetch()）实现跨组件逻辑复用。
可维护性：代码按功能分块，便于调试和扩展。

响应式系统：组合式 API 的基石

基础概念：响应式数据

Vue3 的响应式系统是组合式 API 的核心。通过 ref() 和 reactive() 两个函数，可以创建响应式数据。

1. `ref()`：简单值的响应化

ref() 用于包装基本类型（如数字、字符串）或对象，返回一个可响应的引用对象。

import { ref } from 'vue';

const count = ref(0); // 初始值为 0  
count.value++; // 修改值  
console.log(count.value); // 输出 1

比喻：
ref 类似于“智能指针”，它指向一个值，并在值变化时自动通知 Vue 更新界面。

2. `reactive()`：复杂对象的响应化

reactive() 用于创建整个对象的响应式代理，适合处理复杂数据结构。

import { reactive } from 'vue';

const user = reactive({  
  name: 'Alice',  
  age: 25  
});  

user.age = 26; // 自动触发界面更新

区别与选择：

ref 适合单个值或需要频繁解构的场景。
reactive 适合嵌套对象或数组，避免手动展开 value。

响应式规则与陷阱

Vue3 的响应式系统依赖于代理（Proxy），因此需注意以下规则：

直接修改属性：必须直接操作响应式对象的属性（如 user.age = 26），而非重新赋值整个对象。
数组方法：使用 Vue 提供的 push()、splice() 等变异方法，或通过 reactive 的 set() 方法更新。
新属性添加：通过 this.$set 或 Vue.set 显式添加新属性，否则可能无法触发响应。

组件生命周期：钩子函数的灵活管理

生命周期钩子的演变

在选项式 API 中，生命周期钩子（如 created()、mounted()）通过选项定义。组合式 API 将这些钩子封装为函数，通过 onXXX() 形式调用，例如：

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {  
  console.log('组件已挂载');  
  // 可在此执行 DOM 操作或副作用逻辑  
});

onUnmounted(() => {  
  console.log('组件已卸载');  
  // 清理资源（如定时器、事件监听）  
});

优势对比：

代码集中：生命周期逻辑与相关数据定义在同一位置，减少跳转代码的需要。
复用性：可将生命周期逻辑封装为函数，供多个组件复用。

实际案例：定时器的生命周期管理

假设需要在组件挂载时启动一个定时器，并在卸载时清理：

import { onMounted, onUnmounted } from 'vue';

let timer;  

onMounted(() => {  
  timer = setInterval(() => {  
    console.log('每秒打印一次');  
  }, 1000);  
});

onUnmounted(() => {  
  clearInterval(timer);  
});

通过组合式 API，定时器的创建与清理逻辑紧密关联，避免了选项式 API 中可能出现的代码分散问题。

组件通信：从基础到高级

父子组件通信

父子组件通过 props 和 emit 实现数据传递。组合式 API 中，defineProps() 和 defineEmits() 提供了更简洁的定义方式。

// 子组件  
import { defineProps, defineEmits } from 'vue';

const props = defineProps({  
  message: String  
});

const emit = defineEmits(['update']);  

// 父组件  
<template>  
  <ChildComponent :message="parentMsg" @update="handleUpdate" />  
</template>

跨组件状态管理：`provide` 与 `inject`

组合式 API 中，provide 和 inject 的使用更为直观，无需通过 this：

// 父组件  
import { provide } from 'vue';

const sharedState = reactive({ count: 0 });  

provide('sharedState', sharedState);  

// 子组件  
import { inject } from 'vue';

const sharedState = inject('sharedState');  
console.log(sharedState.count); // 直接访问父组件的响应式数据

全局状态管理：Pinia 的组合式风格

Pinia 是 Vue3 官方推荐的状态管理库，其设计与组合式 API 完美融合。通过 defineStore() 定义 store：

// store/counter.js  
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {  
  state: () => ({ count: 0 }),  
  actions: {  
    increment() { this.count++ }  
  }  
});

在组件中使用时，直接通过 useCounterStore() 引入并调用方法：

import { useCounterStore } from '@/store/counter';

const counter = useCounterStore();  
counter.increment();

自定义组合函数：逻辑复用的终极利器

什么是组合函数？

组合函数（Composition Function）是封装特定功能的函数，通常以 useXXX 命名（如 useFetch()、useValidation()）。通过将逻辑封装为函数，可以实现跨组件复用。

案例：表单验证组合函数

// useValidation.js  
import { ref } from 'vue';

export function useValidation() {  
  const isValid = ref(false);  
  const validate = (value) => {  
    isValid.value = value.trim().length > 0;  
    return isValid.value;  
  };  

  return { isValid, validate };  
}

在组件中使用：

import { useValidation } from '@/composables/useValidation';

const { isValid, validate } = useValidation();  

// 表单提交时调用  
const handleSubmit = () => {  
  if (validate(inputValue)) {  
    console.log('验证通过');  
  } else {  
    console.log('请输入内容');  
  }  
};

组合函数的最佳实践

单一职责原则：每个函数只负责一个功能。
避免副作用泄漏：在函数内处理副作用（如网络请求）时，确保提供清理机制。
命名规范：使用 useXXX 命名，明确标识为组合函数。

对比选项式 API：何时选择组合式？

选项式 API 的局限性

选项式 API 的结构如下：

export default {  
  data() { return { count: 0 }; },  
  methods: { increment() { this.count++; } },  
  mounted() { console.log('mounted'); }  
};

其缺点包括：

逻辑分散：相关功能被分割到不同选项中（如 data、methods）。
复用性差：逻辑复用需要通过 Mixins，易引发命名冲突。

组合式 API 的优势

场景	组合式 API 的解决方案	选项式 API 的痛点
逻辑复用	通过组合函数（如 `useFetch()`）封装	需依赖 Mixins，易冲突
生命周期管理	钩子函数 `onMounted()` 等集中定义	钩子分散在不同选项中
复杂业务逻辑组织	按功能分块，代码结构清晰	代码可能嵌套过深或冗余

迁移建议

对于从 Vue2 或选项式 API 迁移到组合式 API 的开发者，可遵循以下步骤：

逐步迁移：先重构单个组件，逐步扩展到整个项目。
工具辅助：利用 VSCode 插件（如 Volar）的语法高亮和自动补全。
阅读文档：Vue 官方文档提供了详细的组合式 API 对比指南。

高级技巧：响应式依赖与计算属性

计算属性的实现：`computed`

组合式 API 中，computed 函数用于创建计算属性：

import { ref, computed } from 'vue';

const firstName = ref('John');  
const lastName = ref('Doe');  

const fullName = computed(() => {  
  return `${firstName.value} ${lastName.value}`;  
});

响应式依赖的显式声明：`watch`

watch 函数用于监听响应式数据的变化，并执行副作用：

import { watch } from 'vue';

watch([count, fullName], (newValues, oldValues) => {  
  console.log('count 或 fullName 发生变化');  
});

注意：

watch 默认在初始渲染时不触发，可通过 { immediate: true } 改变此行为。
使用 watchEffect() 可自动追踪响应式依赖，但需谨慎避免性能问题。

结论

Vue3 的组合式 API 是一场开发范式的革新，它通过模块化、复用性和可维护性的提升，为开发者提供了更灵活的解决方案。无论是初学者通过组合函数快速复用逻辑，还是中级开发者通过自定义 Hook 构建复杂业务，组合式 API 都能显著提升开发效率。

掌握组合式 API 的关键在于理解其核心思想：将功能拆分为独立的模块，通过组合构建复杂逻辑。随着项目规模的扩大，这种模式的优势将愈发明显。建议开发者在实践中逐步替换旧代码，利用工具和社区资源（如 Pinia、Vitest）进一步优化开发体验。

未来，随着 Vue 生态系统的持续发展，组合式 API 的应用场景和最佳实践将进一步丰富。现在就开始尝试，让代码变得更清晰、更高效吧！

Vue3 组合式 API（超详细）

前言

组合式 API 的核心思想：模块化与逻辑复用

什么是组合式 API？

为什么需要组合式 API？

响应式系统：组合式 API 的基石

基础概念：响应式数据

1. `ref()`：简单值的响应化

2. `reactive()`：复杂对象的响应化

响应式规则与陷阱

组件生命周期：钩子函数的灵活管理

生命周期钩子的演变

实际案例：定时器的生命周期管理

组件通信：从基础到高级

父子组件通信

跨组件状态管理：`provide` 与 `inject`

全局状态管理：Pinia 的组合式风格

自定义组合函数：逻辑复用的终极利器

什么是组合函数？

案例：表单验证组合函数

组合函数的最佳实践

对比选项式 API：何时选择组合式？

选项式 API 的局限性

组合式 API 的优势

迁移建议

高级技巧：响应式依赖与计算属性

计算属性的实现：`computed`

响应式依赖的显式声明：`watch`

结论

最新发布

C 语言实例 – 数组拆分与合并（手把手讲解）

PHP 可用的函数（手把手讲解）

PHP boolval() 函数（手把手讲解）

PHP debug_zval_dump() 函数（手把手讲解）

PHP floatval()、doubleval () 函数（长文讲解）

PHP empty() 函数（一文讲透）

PHP get_defined_vars() 函数（保姆级教程）

PHP get_resource_type() 函数（长文解析）

PHP gettype() 函数（长文解析）

PHP import_request_variables() 函数（手把手讲解）

Vue3 组合式 API（超详细）

前言

组合式 API 的核心思想：模块化与逻辑复用

什么是组合式 API？

为什么需要组合式 API？

响应式系统：组合式 API 的基石

基础概念：响应式数据

1. ref()：简单值的响应化

2. reactive()：复杂对象的响应化

响应式规则与陷阱

组件生命周期：钩子函数的灵活管理

生命周期钩子的演变

实际案例：定时器的生命周期管理

组件通信：从基础到高级

父子组件通信

跨组件状态管理：provide 与 inject

全局状态管理：Pinia 的组合式风格

自定义组合函数：逻辑复用的终极利器

什么是组合函数？

案例：表单验证组合函数

组合函数的最佳实践

对比选项式 API：何时选择组合式？

选项式 API 的局限性

组合式 API 的优势

迁移建议

高级技巧：响应式依赖与计算属性

计算属性的实现：computed

响应式依赖的显式声明：watch

结论

最新发布

C 语言实例 – 数组拆分与合并（手把手讲解）

PHP 可用的函数（手把手讲解）

PHP boolval() 函数（手把手讲解）

PHP debug_zval_dump() 函数（手把手讲解）

PHP floatval()、doubleval () 函数（长文讲解）

PHP empty() 函数（一文讲透）

PHP get_defined_vars() 函数（保姆级教程）

PHP get_resource_type() 函数（长文解析）

PHP gettype() 函数（长文解析）

PHP import_request_variables() 函数（手把手讲解）

1. `ref()`：简单值的响应化

2. `reactive()`：复杂对象的响应化

跨组件状态管理：`provide` 与 `inject`

计算属性的实现：`computed`

响应式依赖的显式声明：`watch`