vue3setup()

Vue 3 中的 `setup()` 函数是一个新的组件选项，它提供了在组件创建过程中执行逻辑的方式。它可以在组件实例创建之前执行，并且在组件实例创建后仍然可以访问其返回的响应式数据和方法。

`setup()` 函数接收两个参数：`props` 和 `context`。`props` 是组件接收到的属性，而 `context` 提供了一些有用的实用程序函数，如 `attrs`、`slots` 和 `emit`。

在 `setup()` 函数中，你可以访问组件的 `props`，并返回一个对象，该对象包含组件的响应式数据和方法。这些数据和方法可以在模板中使用。

以下是一个简单的示例：

import { reactive } from 'vue';

export default {
  setup(props, context) {
    // 创建响应式数据
    const data = reactive({
      message: 'Hello, Vue 3!'
    });

    // 定义方法
    function updateMessage() {
      data.message = 'Updated message!';
    }

    // 返回数据和方法
    return {
      data,
      updateMessage
    };
  }
}

在模板中使用：

<template>
  <div>
    <p>{{ data.message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

这样，当点击按钮时，`data.message` 的值将被更新为 'Updated message!'。