Vue3，将普通的组合式API转换为＜script setup＞形式

在Vue 3中，<script setup> 是一种更简洁的方式来编写组合式API。它允许你在单文件组件（SFC）中直接使用组合式API，而无需显式地定义 setup函数。这种方式减少了样板代码，使得组件更加简洁易读。

下面是如何将普通的组合式API转换为<script setup>形式的示例：

原始的组合式API

假设我们有以下使用组合式API的组件：

<template><div><p>{{ message }}</p><p>{{ reversedMessage }}</p><button @click="increment">Count is: {{ state.count }}</button></div>
</template><script>
import { ref, reactive, computed } from 'vue'export default {setup() {const message = ref('Hello Vue!')const state = reactive({ count: 0 })const reversedMessage = computed(() => {return message.value.split('').reverse().join('')})function increment() {state.count++}return {message,reversedMessage,state,increment}}
}
</script>

转换为 <script setup>

使用<script setup>后，组件可以简化如下：

<template><div><p>{{ message }}</p><p>{{ reversedMessage }}</p><button @click="increment">Count is: {{ state.count }}</button></div>
</template><script setup>
import { ref, reactive, computed } from 'vue'const message = ref('Hello Vue!')
const state = reactive({ count: 0 })const reversedMessage = computed(() => {return message.value.split('').reverse().join('')
})function increment() {state.count++
}
</script>

关键点说明：

• 去除 export default 和 setup 函数：
  在<script setup>中，不需要显式地定义export default或setup函数。
  直接在<script setup>标签内编写你的组合式API代码。
• 自动暴露：
  在<script setup>中定义的所有顶级绑定（包括变量、函数等）都会自动暴露给模板，无需通过return语句。
• 导入依赖：
  仍然需要导入Vue的响应式工具，如ref、reactive、computed等。
• 保持逻辑清晰：
  尽管