Vue 教程：使用组合式 API 构建可维护的大型应用架构

快速概述

组合式 API（Composition API）是 Vue 3 新增的编码风格，旨在解决选项式 API（Options API）在大型应用中逻辑分散、复用困难的问题。它通过将相关逻辑组织在一起，提升代码的可读性和可维护性。本文适用于使用 Vue 3 进行中大型项目开发的开发者，前置环境要求包括 Node.js 和 Vue CLI 或 Vite 构建工具。

核心概念与原理

选项式 API 将数据、方法、计算属性等分散在 data、methods、computed 等选项中，当组件逻辑复杂时，相关代码会被拆散，难以维护。组合式 API 允许我们在 setup 函数中按逻辑关注点组织代码，通过 ref 和 reactive 创建响应式状态，computed 定义计算属性，watch 监听数据变化，从而将功能模块化，提高复用性和可测试性。

实战步骤与代码

1. 创建 Vue 3 项目

使用 Vue CLI 创建新项目：

vue create vue-demo
cd vue-demo
npm run serve

项目创建后，默认使用选项式 API，我们将在组件中改用组合式 API。

2. 使用 setup 函数定义响应式状态

<script>
import { ref, reactive } from 'vue';
export default { setup() { // 使用 ref 定义基本类型响应式数据 const count = ref(0); // 使用 reactive 定义对象类型响应式数据 const user = reactive({ name: '张三', age: 25 });
// 定义方法 const increment = () => { count.value++; };
return { count, user, increment }; } }; </script>

在模板中可以直接使用 count 和 user，无需 .value。

3. 使用 computed 和 watch

import { computed, watch } from 'vue';
setup() { const firstName = ref('张'); const lastName = ref('三');
// 计算属性 const fullName = computed(() => firstName.value + ' ' + lastName.value);
// 侦听器 watch(fullName, (newVal, oldVal) => { console.log(`姓名从 ${oldVal} 变为 ${newVal}`); });
return { firstName, lastName, fullName }; }

computed 会根据依赖自动更新，watch 在数据变化时执行回调。

4. 组件通信与逻辑复用

组合式 API 支持将逻辑提取到独立的函数中，实现跨组件复用。例如，创建一个 useCounter 函数：

// useCounter.js
import { ref } from 'vue';
export function useCounter(initial = 0) { const count = ref(initial); const increment = () => count.value++; const decrement = () => count.value--; return { count, increment, decrement }; }

在组件中引入并使用，即可复用计数器逻辑，提高代码组织性。

常见坑点与优化

• 忘记 .value：在 setup 中访问 ref 创建的响应式数据时，必须使用 .value，但在模板中会自动解包，无需 .value。
• reactive 丢失响应性：对 reactive 对象进行解构或直接赋值会丢失响应性，建议使用 ref 或 toRefs 保持响应。
• watch 深度监听：监听 reactive 对象时，默认是深度的，但监听 ref 对象时，需要设置 deep: true 才能深度监听。
• 性能优化：避免在 setup 中创建不必要的响应式数据，合理使用 computed 缓存计算结果，减少不必要的渲染。

遵循这些建议，可以避免常见错误，提升应用性能。

总结

组合式 API 为 Vue 3 大型应用提供了更灵活、更可维护的代码组织方式。通过本文的实战演练，您可以掌握 setup、ref、reactive、computed、watch 等核心用法，并学会如何提取复用逻辑。建议在实际项目中逐步采用组合式 API，并结合 Vue 官方文档深入学习更多高级特性。