vue3中setup语法糖简介

在 Vue 3 中引入了 Composition API，其中 `setup` 是一个新的选项，用于替代 Vue 2.x 中的 `data`、`methods` 和其他选项。`setup` 提供了一种函数式的组织组件逻辑的方式。

使用 `setup` 时，你需要返回一个对象，该对象中包含组件内部需要用到的属性和方法。这些属性和方法可以直接在模板中使用，而无需像 Vue 2.x 那样在 `data` 或 `methods` 中声明。

在 `setup` 函数中，你可以访问到 `props`、`context` 等参数，以及 Vue 3 提供的一些函数（如 `reactive`、`ref`、`computed` 等）来定义响应式数据。通过 `setup`，你可以更灵活地组织组件逻辑，并且使代码更易读和维护。

下面是一个简单的示例，展示了如何在 Vue 3 中使用 `setup`：

import { reactive } from 'vue';

export default {
  props: {
    msg: String
  },
  setup(props) {
    const state = reactive({
      count: 0,
      increment() {
        state.count++;
      }
    });

    return {
      state
    };
  }
};

在上面的示例中，我们通过 `reactive` 创建了一个响应式对象 `state`，并在 `setup` 函数中定义了一个 `increment` 方法。最后，我们将 `state` 对象返回，以便在模板中使用。