vue的 setup 使用

Vue 3.0 中的 `setup` 是一个新的组件选项，用于替代 Vue 2.0 中的 `beforeCreate`、`created` 和 `beforeMount` 等选项。它是一个函数，接收两个参数：

- `props`：该组件接收的属性
- `context`：一个上下文对象，包含了一些常用的 Vue API 和属性，如 `attrs`、`slots`、`emit`、`isServer`、`ssrContext` 等。

`setup` 函数中可以使用 Vue 3.0 中的新特性，如 reactive、ref、computed 等。这些特性可以让我们更方便地管理组件的状态和数据流。

下面是一个简单的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3.0',
      count: 0,
    })

    const increment = () => {
      state.count++
    }

    return {
      message: state.message,
      increment,
    }
  }
}
</script>

在这个示例中，我们使用 `reactive` 函数创建了一个响应式的状态对象，并将其返回给 `setup` 函数。然后我们定义了一个 `increment` 方法，用于在点击按钮时增加计数器的值。最后，我们将 `message` 和 `increment` 方法返回给模板，以便在模板中使用。

需要注意的是，在 `setup` 函数中返回的数据会被注入到模板中，因此可以直接在模板中使用。而在 `setup` 函数之外定义的数据则无法在模板中使用。