当前位置：首页 > article >正文

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

article 2025/2/23 0:52:04

在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等。
保持逻辑清晰：
尽管

查看全文

http://www.kler.cn/a/403621.html