vue script上添加setup

在Vue 3中，可以使用 `setup()` 函数来替代 Vue 2 中的 `created()` 和 `mounted()` 等生命周期钩子函数。`setup()` 函数是一个新的组件选项，它接收 `props` 和 `context` 参数，并且返回一个包含模板中需要用到的响应式数据、计算属性、方法等的对象。

在Vue单文件组件的 `<script>` 标签中，可以像下面这样添加 `setup()` 函数：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    propMessage: String
  },
  setup(props, context) {
    const message = ref(props.propMessage)

    // 响应式数据和方法
    const increment = () => message.value++

    // 返回数据和方法
    return {
      message,
      increment
    }
  }
}
</script>

在上面的例子中，`setup()` 函数接收 `props` 和 `context` 参数，然后定义了一个响应式数据 `message` 和一个方法 `increment`，最后将它们放在一个对象中返回。在模板中，可以直接使用 `message` 数据和 `increment` 方法，它们都是响应式的，当它们发生变化时，模板会自动更新。

注意，`setup()` 函数中的响应式数据需要使用 `ref()` 函数包裹，否则模板无法检测到它们的变化。`ref()` 函数可以将普通数据转换为响应式数据。如果需要定义一个响应式的对象，可以使用 `reactive()` 函数。