Vue 3的Composition API 详解以及例子

Vue 3的Composition API是一种新的API风格，它使得在Vue组件中组织和复用代码更加灵活和直观。下面我将详细解释Composition API的几个关键概念，并提供一个示例来演示其用法。

基本概念：

1. setup 函数：每个Vue 3组件都必须包含一个名为setup的函数。该函数在组件实例化之前被调用，并接收两个参数：props和context。在setup函数中，我们可以定义响应式数据、计算属性、方法等。
2. ref 和 reactive：ref函数用于创建单个的响应式数据，而reactive函数用于创建一个响应式对象。通过这两个函数，我们可以将普通数据转换为响应式数据，以便在组件中追踪和更新。
3. watch 和 watchEffect：watch函数用于监视响应式数据的变化，并在数据发生变化时执行指定的回调函数。watchEffect函数则会自动追踪其内部使用的响应式数据，并在数据变化时执行回调函数。这两个函数可以用于处理需要监听数据变化的场景。
4. computed：computed函数用于创建计算属性。与Vue 2的computed选项不同，Vue 3的computed可以直接在setup函数中定义，并通过返回一个响应式引用来实现计算属性的功能。
5. 生命周期钩子：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可以更灵活地组织和复用代码。将相关逻辑划分为独立的函数，并将它们返回给模板使用，能够使代码更易于理解和维护。