vue3composition 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() {
    // 创建一个响应式引用变量
    const count = ref(0);

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

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

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

1. ref: ref 是 Vue 3 中用于创建响应式数据的一个函数。它返回一个带有 .value 属性的引用对象，该属性指向原始值。在这个例子中，count 是一个响应式的数字。
2. setup 函数: setup 是 Composition API 的入口点，在组件创建之前执行。所有使用 Composition API 编写的逻辑都放在 setup 函数中。
3. 返回值: setup 函数返回的对象中的属性和方法可以直接在模板中使用。在这个例子中，count 和 increment 方法被返回并在模板中使用。
4. 模板绑定: 在模板中，我们通过插值 ({{ count }}) 显示 count 的值，并通过事件绑定 (@click="increment") 触发 increment 方法。

如果你对 Composition API 更多的功能感兴趣，可以查阅 Vue 3 的官方文档。