vue3 setup 组件

在 Vue 3 中，可以使用 Composition API 的 `setup` 函数来定义组件逻辑。`setup` 函数可以在组件实例创建之前执行，并且可以返回一个对象，其中包含组件中需要使用的属性、方法和生命周期钩子。

下面是一个简单的示例，展示如何在 Vue 3 中使用 `setup` 函数定义组件逻辑：

<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);

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

    // 返回需要暴露给模板的属性和方法
    return {
      count,
      increment,
    };
  },
};
</script>

在上面的示例中，我们使用 `ref` 创建了一个名为 `count` 的响应式变量，并定义了一个方法 `increment` 来增加 `count` 的值。在 `setup` 函数中，我们将 `count` 和 `increment` 返回给模板，以便在模板中使用。

需要注意的是，在 `setup` 函数中，我们不需要再使用 `data` 和 `methods` 这样的选项来定义属性和方法，而是直接将它们定义在 `setup` 函数的返回对象中。

通过使用 `setup` 函数，我们可以更灵活地组织和重用组件逻辑，并且可以更好地利用 JavaScript 的语法特性。此外，`setup` 函数还可以访问组件的上下文，如 `props`、`attrs`、`context` 等，以及 Vue 3 提供的其他 API。