Vue Academy · 课时

script setup 入门

Q: 「script setup 入门」这节课中我会学到什么？

如何编译为 setup()、自动导入，以及模板中可用的顶层绑定。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

如何编译为 setup()、自动导入，以及模板中可用的顶层绑定。

script setup 入门 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

更简洁的组合式 API

<script setup> 是组合式 API 在编译时提供的语法糖。它去除了样板代码，让您的单文件组件读起来像使用响应式变量的普通 JavaScript。

从 setup() 到 script setup

经典写法需要 export default、一个 setup() 函数以及显式的 return。请将它与 <script setup> 版本进行比较。

<!-- classic -->
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

script setup 版本

使用 <script setup> 时，不需要包装对象，也不需要 return 语句。顶层变量会自动暴露给模板。

<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

无需显式返回

编译器会将每个顶层绑定——变量、函数和导入内容——都视为模板中可用的内容。这样您需要编写的代码更少，也不会忘记返回某项内容。

顶层函数同样可用

在顶层定义函数，然后直接在模板中绑定它即可。无需返回该函数。

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

导入的组件会自动注册

在经典 API 中，您必须在 components 选项中列出组件。使用 <script setup> 时，只需导入组件，就可以在模板中使用它。

<script setup>
import BaseButton from './BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

最终仍会编译为 setup()

在底层，编译器会将 <script setup> 转换为常规的 setup() 函数。您可以获得完全相同的行为和性能，只是编写方式更加简洁。

使用 lang ts 添加 TypeScript

向标签添加 lang="ts" 即可启用 TypeScript。之后您可以为变量添加类型、在编译器宏中使用泛型，并获得完整的类型推断。

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>

编译器宏

在 <script setup> 中，您可以使用 defineProps、defineEmits 和 defineExpose 等特殊编译器宏。它们无需导入，编译器会识别它们。您将在接下来的课程中逐一学习。

与普通 script 块混用

有时您需要一些在模块作用域中只运行一次的选项，例如自定义组件名称。您可以在 <script setup> 旁边添加一个普通的 <script> 块。

<script>
export default { name: 'MyComponent' }
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

团队偏爱 script setup 的原因

样板代码更少——无需包装对象或返回语句。
组件自动注册。
通过编译时分析获得更好的运行时性能。
出色的 TypeScript 支持。

它是 Vue 3 单文件组件的推荐写法。

快速检查

请确认您对 script setup 的理解。

回顾

您已经学习了 <script setup> 的基础知识：

它是在 setup() 之上的编译时语法糖。
无需显式返回——顶层绑定会自动暴露。
导入的组件会自动注册。
添加 lang="ts" 即可使用 TypeScript。
无需导入即可使用 defineProps 等编译器宏。

常见问题解答

「script setup 入门」课时是免费的吗？

是的 — 「script setup 入门」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「script setup 入门」这节课中我会学到什么？

如何编译为 setup()、自动导入，以及模板中可用的顶层绑定。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「script setup 入门」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy