vue3setip写法

在 Vue 3 中，使用 `setup` 函数来代替 Vue 2 中的 `data`、`computed`、`methods` 等选项，同时也可以在 `setup` 中访问到 `props`、`context` 等参数。以下是一个简单的 Vue 3 `setup` 函数的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

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

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

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

在 `setup` 函数中，我们使用 `reactive` 函数来创建响应式对象 `state`，包含了 `message` 和 `count` 两个属性。然后我们定义了 `increment` 方法，用于增加 `count` 的值。最后通过 `return` 语句将 `message` 和 `increment` 方法暴露出去，以便在模板中使用。