在Vue 3中，Vue Composition API是一项重大的更新，它为Vue开发者提供了一种更加灵活、高效的方式来组织和复用逻辑。这一API的设计旨在解决Vue 2中Options API的一些局限性，特别是当组件变得复杂时，Options API在代码的组织性和可读性上可能会面临挑战。Composition API通过允许你将相关的逻辑（如响应式状态、计算属性、方法等）封装进函数（通常称为“组合式函数”或“composables”）中，极大地提高了代码的可维护性和复用性。 ### Vue Composition API的核心概念 #### 1. **响应式引用（Reactive References）** Vue 3引入了`reactive`和`ref`两个函数来创建响应式数据。`reactive`用于创建响应式的对象，而`ref`则用于创建响应式的基本数据类型（虽然内部是将基本类型包装在一个对象中）。这些响应式数据在组件的模板或计算属性中被访问时，能够自动追踪依赖并在数据变化时更新视图。 #### 2. **组合式函数（Composables）** 组合式函数是Composition API的核心，它们是普通的JavaScript函数，可以接受响应式状态、返回计算属性、执行副作用（如异步操作或监听器）等。通过将逻辑封装在函数内部，你可以在多个组件之间复用这些逻辑，而无需通过Vue的mixins或高阶组件（HOCs）来实现。 #### 3. **生命周期钩子** 在Composition API中，生命周期钩子被导入并使用，如`onMounted`、`onUpdated`等，这些钩子允许你在组件的不同生命周期阶段执行代码。它们与Options API中的`mounted`、`updated`等选项相对应，但提供了更灵活的使用方式。 #### 4. **计算属性与侦听器（Computed & Watch）** `computed`函数用于创建计算属性，这些属性基于它们的响应式依赖进行缓存。`watch`函数则用于侦听响应式数据源的变化，并在其变化时执行副作用。这些工具在处理复杂逻辑时非常有用，尤其是在需要根据数据变化来执行异步操作或更新其他状态时。 ### 示例代码 假设我们有一个用户信息组件，需要显示用户的姓名和年龄，并且有一个按钮可以修改用户的年龄。我们可以使用Composition API来实现这个组件。 ```javascript ``` 在这个例子中，我们使用了`ref`来创建响应式的`user`对象，并在`setup`函数中定义了`incrementAge`函数来修改用户的年龄。我们还展示了如何使用`onMounted`生命周期钩子来在组件挂载后执行代码。最后，我们通过`return`语句将`user`对象和`incrementAge`函数暴露给模板，以便在模板中使用它们。 ### 总结 Vue 3的Composition API为Vue开发者提供了一种更加现代、灵活的方式来构建Vue应用。通过响应式引用、组合式函数、生命周期钩子以及计算属性和侦听器等核心概念，开发者能够编写出更加清晰、可维护和可复用的代码。在码小课等学习资源中，你可以找到更多关于Vue Composition API的深入讲解和实战案例，帮助你更好地掌握这一强大的工具。