用script setup语法

Script Setup语法是Vue 3中的新语法，用于简化组件的定义。它将组件的模板、状态和方法都定义在一个setup函数中，使组件更加清晰和易于维护。

以下是一个使用Script Setup语法的组件示例：

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

<script setup>
  import { ref } from 'vue'

  const title = 'Hello World'
  const count = ref(0)

  function increment() {
    count.value++
  }

  const message = computed(() => `The count is ${count.value}.`)

  return { title, message, increment }
</script>

在上面的示例中，我们使用了Script Setup语法来定义组件。在setup函数中，我们首先导入了Vue的ref函数来创建响应式变量count。然后，我们定义了一个increment函数，用于增加count的值。接下来，我们使用computed函数来计算message的值，它会根据count的值动态生成一条消息。最后，我们返回了title、message和increment函数，以便在模板中使用它们。

总的来说，Script Setup语法让我们可以更加简洁地定义组件，并且能够更好地组织组件的状态和方法。