Vue 3的Composition API是一种新的API风格，它使得在Vue组件中组织和复用代码更加灵活和直观。下面我将详细解释Composition API的几个关键概念，并提供一个示例来演示其用法。
基本概念：
- setup 函数：每个Vue 3组件都必须包含一个名为setup的函数。该函数在组件实例化之前被调用，并接收两个参数：props和context。在setup函数中，我们可以定义响应式数据、计算属性、方法等。
- ref 和 reactive：ref函数用于创建单个的响应式数据，而reactive函数用于创建一个响应式对象。通过这两个函数，我们可以将普通数据转换为响应式数据，以便在组件中追踪和更新。
- watch 和 watchEffect：watch函数用于监视响应式数据的变化，并在数据发生变化时执行指定的回调函数。watchEffect函数则会自动追踪其内部使用的响应式数据，并在数据变化时执行回调函数。这两个函数可以用于处理需要监听数据变化的场景。
- computed：computed函数用于创建计算属性。与Vue 2的computed选项不同，Vue 3的computed可以直接在setup函数中定义，并通过返回一个响应式引用来实现计算属性的功能。
- 生命周期钩子：Vue 3的Composition API使用不同的方式来处理生命周期钩子。可以使用onMounted、onUpdated和onUnmounted等函数来替代Vue 2中常用的生命周期函数，以更清晰地表达组件的生命周期行为。
例子：
以下是一个使用Vue 3 Composition API的简单示例，展示了如何创建一个计数器组件并利用Composition API来管理它的状态和逻辑。
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { // 创建响应式数据 const count = ref(0); // 定义方法 function increment() { count.value++; } // 返回需要暴露给模板的数据和方法 return { count, increment }; } }; </script>
在这个示例中，我们使用了Composition API来创建一个计数器组件。在setup函数中，我们调用ref函数来创建一个名为count的响应式数据，并定义了一个increment方法用于增加计数器的值。
在模板中使用双花括号语法（{{ count }}）将count数据绑定到页面上，并通过点击按钮时触发increment方法来增加计数器的值。
通过这个示例，我们可以看到使用Composition API可以更灵活地组织和复用代码。将相关逻辑划分为独立的函数，并将它们返回给模板使用，能够使代码更易于理解和维护。
