2026年3月15日·更新于 2026年4月21日· 56 次浏览 Vue 3TypeScript

Vue 3 `<script setup>` 与编译宏

`defineProps` / `defineEmits` / `defineExpose` 为何是编译期宏；与 Options API 混用的边界；TS 下 props 类型推导路径。

作者

ZHOU YI

<script setup> 在编译阶段将顶层绑定暴露给模板，宏在 AST 层被替换，运行时并不存在这些函数，因此无需 import。

vue

<script setup lang="ts">
const props = defineProps<{ id: string }>()
const emit = defineEmits<{ (e: 'save', v: number): void }>()
</script>

组合式与复用

逻辑复用优先抽成 composable 函数；与 provide/inject 搭配时注意响应式丢失问题（ref 需解包或 toRef）。