Vue3 组合式API完全指南：从入门到精通
一、组合式API的诞生背景
Vue2中采用的选项式API（Options API），将组件的逻辑按照data、methods、computed、watch等选项进行划分，对于简单组件来说，这种方式清晰易懂，但随着组件复杂度的提升，一个逻辑相关的代码会被分散到不同的选项中，形成「逻辑碎片化」，难以维护和复用。
为了解决这个问题，Vue3推出了组合式API（Composition API），它允许开发者按照逻辑功能来组织代码，将相关的逻辑聚合在一起，大幅提升了代码的可维护性和复用性，同时还提供了更好的类型推导支持，更适合大型项目的开发。
二、组合式API的核心入口：setup函数
setup是组合式API的核心入口函数，它在组件实例创建之前（beforeCreate钩子之前）执行，此时组件实例还未被创建，因此在setup内部无法访问this（this为undefined）。
setup函数有两个可选参数：
props：组件接收的属性，是响应式的，不能被解构（解构会丢失响应式）context：上下文对象，包含attrs、emit、slots等属性，非响应式
setup函数的返回值可以是一个对象，对象中的属性和方法可以在模板中直接使用；也可以返回一个渲染函数，直接定义组件的渲染内容。
三、响应式数据创建：ref与reactive
Vue3提供了两个核心API来创建响应式数据：ref和reactive，它们的底层都是基于Vue的响应式系统实现，但适用场景有所不同。
1. ref：用于创建基本类型响应式数据
ref可以接收一个基本类型值（字符串、数字、布尔值等）作为参数，返回一个包含响应式数据的「引用对象」，该对象只有一个value属性，用于访问和修改内部的响应式数据。
在模板中使用ref创建的响应式数据时，不需要手动添加.value，Vue会自动进行解包；而在setup函数内部（JavaScript代码中），必须通过.value来访问和修改数据。
2. reactive：用于创建对象类型响应式数据
reactive可以接收一个对象或数组作为参数，返回一个该对象的响应式代理，直接对代理对象的属性进行修改即可触发视图更新，不需要像ref那样使用.value。
需要注意的是，reactive创建的响应式数据有一个限制：无法直接替换整个对象（替换后会丢失响应式），也无法用于基本类型数据（会报错）。
四、总结与最佳实践
组合式API是Vue3的核心特性，它解决了选项式API在大型项目中的局限性，提升了代码的可维护性和复用性。在实际开发中，建议遵循以下最佳实践：
- 按照逻辑功能组织
setup内部的代码，将相关的响应式数据、方法、监听逻辑聚合在一起 - 对于复杂的逻辑，抽离为自定义Hook，提升代码复用性
- 基本类型数据使用
ref，对象类型数据使用reactive，遵循「最小响应式」原则 - 避免在
setup中过度使用watch，优先使用computed处理衍生数据
随着Vue3的普及，组合式API已经成为前端开发的必备技能，掌握它不仅能提升你的Vue开发效率，还能帮助你更好地理解前端响应式系统的底层原理。