使用vue3 setup

Vue 3 的 setup 函数是一个新的组件选项，它允许你在组件内部编写响应式的逻辑。以下是一个使用 Vue 3 的 setup 函数的示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

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

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

在这个示例中，我们使用了 Vue 3 的 `reactive` 函数来创建一个响应式的状态对象 `state`，并在 `setup` 函数中返回了 `state` 和一个 `increment` 函数，以供模板中使用。

值得注意的是，在 Vue 3 中，`setup` 函数是在组件实例化之前执行的，因此你无法在 `setup` 函数中访问组件的实例属性或方法。如果你需要在 `setup` 函数中访问组件的属性或方法，你可以将它们作为参数传递给 `setup` 函数。例如：

<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    initialMessage: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const message = ref(props.initialMessage)

    return {
      message
    }
  }
}
</script>

在这个示例中，我们将 `initialMessage` 属性作为参数传递给了 `setup` 函数，并使用 `ref` 函数创建了一个响应式的状态 `message`。