vue3 setup函数

Vue 3 中的 `setup` 函数是一个新的组件选项，它代替了 Vue 2 中的 `data`、`computed`、`methods` 等选项。它是一个特殊的函数，用于设置组件的初始状态、响应式数据以及组件的行为。

在 `setup` 函数中，你可以执行以下操作：
- 创建响应式数据：使用 `ref`、`reactive`、`toRef` 等函数来创建响应式数据。
- 计算属性：使用 `computed` 函数来创建计算属性。
- 方法：直接在 `setup` 函数中定义方法。
- 生命周期钩子：使用 `onMounted`、`onUpdated`、`onUnmounted` 等函数来定义生命周期钩子。
- 访问组件上下文：通过参数访问组件实例、属性、插槽等。

一个简单的例子如下所示：

import { ref, reactive, computed, onMounted } from 'vue';

export default {
  setup() {
    // 创建响应式数据
    const count = ref(0);
    const state = reactive({
      message: 'Hello, Vue 3!',
    });

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // 生命周期钩子
    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      state,
      doubleCount,
      increment,
    };
  },
};

在上述代码中，我们使用 `ref` 和 `reactive` 来创建响应式数据，使用 `computed` 创建计算属性，使用 `onMounted` 定义组件的 `mounted` 钩子。最后，将需要暴露给模板的数据、方法等通过返回一个对象来进行导出。