vue3中setup用法

在 Vue 3 中，`setup` 函数是一个新的组件选项，它是组件的入口点。与之前的选项 `data`、`computed`、`methods` 不同，`setup` 函数是一个普通的函数，不是对象，它可以进行一些数据处理、事件监听、组件声明等操作，并返回一个对象，这个对象就是模板中需要用到的数据和方法。

下面是一个简单的例子：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

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

    return {
      count,
      increment
    }
  }
}
</script>

在上面的例子中，使用了 `ref` 函数来创建一个响应式数据 `count`，并声明了一个 `increment` 函数来处理点击事件。在 `setup` 函数中返回了一个包含 `count` 和 `increment` 的对象，以便在模板中使用。

需要注意的是，`setup` 函数必须返回一个对象，否则会导致组件无法渲染。此外，`setup` 函数中的数据和方法都需要通过 `return` 语句返回，否则无法在模板中使用。