Composition API 与 script setup

你将学会什么

• 说清 Options API 与 Composition API 的差异
• 写出 <script setup> 的最小组件
• 知道为什么真实项目里优先推荐 <script setup>

正文

如果你以前用过 Vue2，最常见的感受可能是：data、methods、computed 写在一起很方便，但功能变复杂后，同一个功能的逻辑会被拆到好几个选项里。Vue3 的 Composition API 改变的是“按功能组织代码”的方式。最小可感差异是这样的：

import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value += 1
}

当你把表单验证、接口请求、组件交互都写进同一个函数时，代码的可读性会比分散在多个选项里更好。在真实项目里，推荐直接使用 <script setup>，因为它少了很多样板代码，而且 TypeScript 支持更好。一个最小示例是：

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello mcourse.app')
</script>

<template>
  <p class="text-lg">{{ message }}</p>
</template>

这种写法适合学生实验、课程作业、个人作品集，也适合继续扩展成更复杂的组件。学这一套语法，毕业后做前端实习也仍然通用。

动手练

练习

新建一个 Vue 组件，用 <script setup lang="ts"> 声明一个 ref 变量，并在模板里用 {{ }} 显示它。完成标准：组件里没有任何 export default 选项代码，页面能正常显示变量的初始值。

知识检查

先自己回答，再看答案：

1. Options API 在功能变复杂后最大的问题是什么？
2. <script setup> 相比旧写法的主要优势是什么？
3. 为什么说“按功能组织代码”比“按选项组织代码”更易读？

参考答案

1. 同一个功能的逻辑会被拆到 data、methods、computed 等多个选项里，难以整体理解。
2. 少样板代码，TypeScript 支持更好，直接以变量和函数形式组织逻辑。
3. 相关逻辑放在一起，读代码时不需要跨多个选项跳来跳去。

本节小结

• Composition API 按功能组织代码，而非按选项组织
• <script setup> 是 Vue3 最常用的组合式 API 写法
• 这套语法从学生项目到工作项目都通用

script setup 小测

x

1 / 3

Vue3 默认推荐用于组合式 API 的语法是？

Options API<script setup>mixinsprovide/inject

下一题