vue3 组合式api

// 使用 Vue 3 的组合式 API 示例

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

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

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

    // 定义一个方法来增加 count
    const increment = () => {
      count.value++;
    };

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

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. ref: ref 是 Vue 3 提供的一个函数，用于创建一个响应式的引用对象。在这个例子中，我们使用 ref(0) 来创建一个初始值为 0 的响应式变量 count。
2. setup 函数: 这是组合式 API 的入口点。所有的逻辑代码都写在这个函数中，并且返回的对象中的属性和方法可以在模板中直接使用。
3. increment 方法: 这是一个简单的函数，用于增加 count 的值。通过 count.value++ 来修改 count 的值。
4. 返回值: 在 setup 函数的最后，我们需要返回一个对象，这个对象中的属性和方法可以在模板中使用。

这样，我们就完成了一个简单的计数器组件，展示了如何使用 Vue 3 的组合式 API。