组合式API的写法是什么样的

组合式API是Vue 3中引入的新特性，它提供了一种新的组织组件逻辑的方式。下面是组合式API的写法示例：

<template>
  <div>
    <button @click="increment">增加</button>
    <p>计数：{{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用ref创建一个响应式的变量
    const count = ref(0);

    // 定义一个增加计数的函数
    const increment = () => {
      count.value++;
    };

    // 返回模板中需要使用的数据和方法
    return {
      count,
      increment
    };
  }
};
</script>

在上面的示例中，`setup`函数是组合式API的入口。在`setup`函数中，我们可以使用各种Vue提供的函数和响应式API来定义数据、计算属性、方法等。在示例中，我们使用`ref`函数创建了一个响应式的变量`count`，并且定义了一个增加计数的方法`increment`。

最后，在`return`语句中返回我们希望在模板中使用的数据和方法。这样，在模板中就可以直接使用`count`和`increment`。

需要注意的是，组合式API中的`setup`函数是一个特殊的函数，它会在组件实例被创建之前执行，所以在`setup`函数中不能使用组件实例的属性和方法。如果需要在`setup`函数中使用组件实例的属性和方法，可以使用`getCurrentInstance`函数来获取当前组件实例的上下文。

总的来说，组合式API的写法相比于Options API更加灵活和直观，可以更好地组织和重用组件逻辑。