vue 组合式api使用

Vue 3.0 中的组合式 API 是一种新的 API 风格，能够让我们更方便地组合和复用逻辑代码。

使用组合式 API，我们需要按照以下步骤来创建一个组合函数：

1. 使用 `setup` 函数来创建组合函数。
2. 在 `setup` 函数中使用 `ref`、`reactive`、`computed` 等函数创建响应式数据。
3. 使用 `watch`、`onMounted`、`onUpdated` 等函数来创建副作用函数。
4. 将需要暴露给模板的数据和方法返回。

下面是一个简单的组合式 API 的例子：

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    function decrement() {
      count.value--
    }

    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

在这个例子中，我们使用了 `ref` 函数来创建了一个名为 `count` 的响应式数据，并分别创建了两个方法 `increment` 和 `decrement`，用于增加和减少计数器的值。最后，我们将这些数据和方法返回给模板使用。

使用组合式 API，我们可以更清晰地组织逻辑代码，并且可以更方便地进行代码复用。