vue script setup

在Vue中，`<script setup>`是一种编译时语法糖，用于在单文件组件(SFC)中使用组合式API。相比普通的`<script>`语法，它具有更少的样板内容和更简洁的代码。使用`<script setup>`可以使用动态组件，通过动态的`:is`来绑定组件，如`<component :is="someCondition ? Foo : Bar" />` [1。

基本语法上，需要将`setup`属性添加到`<script>`代码块上，并在其中编写代码。代码会被编译成组件的`setup()`函数的内容。不同于普通的`<script>`只在组件首次引入时执行一次，`<script setup>`中的代码会在每次创建组件实例时执行。

此外，在`<script setup>`中可以使用顶层的`await`关键字。代码会被编译成带有`async setup()`的格式。例如，`const post = await fetch(`/api/post/1`).then(r => r.json())` 可以在`<script setup>`中使用。

总结起来，`<script setup>`是Vue中一种更简洁、更灵活的编译时语法糖，可以在组件中使用组合式API。它支持动态组件的使用，提供更少的样板内容和更好的运行时性能。同时，它还可以使用顶层的`await`关键字来进行异步操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3中的单文件组件＜script setup＞详解](https://blog.csdn.net/qq_41880073/article/details/124199104)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]