Vue 3 工程化实战：用 script setup 把组件写得更短更稳

为什么是 script setup

Vue 3 的组合式 API 最初用 setup() 函数承载逻辑，但要在模板里用就得手动 return 每一个变量，组件一大就变成一堆 return 语句。script setup 是编译时的语法糖：写在里面的顶层绑定自动暴露给模板，类型推导也天然更好。

基础写法对比

传统 setup 函数：

import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    const inc = () => count.value++;
    return { count, double, inc };
  },
};

等价的 script setup，不需要 return：

<script setup lang="ts">
import { ref, computed } from "vue";

const count = ref(0);
const double = computed(() => count.value * 2);
const inc = () => count.value++;
</script>

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

props 与 emit 的编译器宏

defineProps 和 defineEmits 是编译器宏，不需要 import，且能完整推导类型：

<script setup lang="ts">
interface Props {
  title: string;
  size?: "sm" | "md" | "lg";
}
const props = withDefaults(defineProps<Props>(), {
  size: "md",
});

const emit = defineEmits<{
  (e: "confirm", value: number): void;
}>();

function onTap() {
  emit("confirm", 1);
}
</script>

组件自动命名与代码组织

在 script setup 里，导入的组件直接在模板使用，不需要 components 注册；文件名会作为 devtools 显示的组件名，建议用多词命名。当逻辑变重时，把可复用的组合式逻辑抽到 useXxx 函数，组件里只剩装配：

<script setup lang="ts">
import { useUserList } from "@/composables/useUserList";
import { usePagination } from "@/composables/usePagination";

const { users, loading } = useUserList();
const { page, next } = usePagination();
</script>

几个容易踩的坑

• defineProps / defineEmits / defineExpose 是编译期宏，不能出现在条件分支或函数内部。
• 需要父组件通过 ref 访问子组件内部时，必须用 defineExpose 显式暴露，否则默认不暴露。
• 顶层 await 在 script setup 中合法，组件会被自动当作异步依赖处理，配合 Suspense 使用。
• 类型声明优先用 defineProps<接口> 而不是运行时 props 对象，这样能拿到端到端类型推导。

script setup 把"样板代码"基本压到了最低：没有 return、没有 components 注册、props/emits 自带类型。它在编译阶段就完成了模板绑定分析，运行期没有额外开销，是 Vue 3 项目的默认推荐写法。