vue3 composition api

// 示例代码：Vue 3 Composition API 基本用法

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

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

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

    // 定义一个方法来修改 count 的值
    const increment = () => {
      count.value++;
    };

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

<!-- 解释说明：
1. `ref` 是 Vue 3 中用于创建响应式数据的函数，返回一个包含 value 属性的对象。
2. `setup` 函数是 Composition API 的入口，所有的逻辑都在这里编写。
3. 在 `setup` 函数中定义的变量和方法需要通过 `return` 返回，才能在模板中使用。
4. `count.value` 用来访问和修改 ref 创建的响应式变量的值。
5. `@click` 指令绑定按钮点击事件，触发 `increment` 方法，从而更新 `count` 的值。 -->