vue3组合式api写法

Vue 3 的组合式 API 是一种新的写法，它可以让你更方便地组织和重用你的代码。下面是一个简单的示例：

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      title: 'Vue 3 Composable Example'
    })

    const increment = () => {
      state.count++
    }

    const doubleCount = computed(() => state.count * 2)

    return {
      ...state,
      increment,
      doubleCount
    }
  }
}
</script>

在这个例子中，我们使用 `reactive` 创建了一个响应式的状态对象 `state`，然后使用 `computed` 创建了一个计算属性 `doubleCount`。我们还定义了一个 `increment` 函数来增加 `count` 的值。最后，我们使用 `return` 将所有需要暴露的属性和函数都返回。

在 `template` 中，我们可以直接使用这些暴露出来的属性和函数。注意，在组合式 API 中不需要使用 `this` 来访问属性和函数，而是直接使用变量名即可。

总之，Vue 3 的组合式 API 可以让你更灵活地组织组件代码，提高代码的可读性和可维护性。