Vue3 setup 语法糖使用教程

Vue 3 的 `script setup` 语法糖是一种编译时的便捷写法，它彻底简化了组合式 API 的使用流程——无需手动编写 `setup()` 函数和 `return` 暴露逻辑，顶层声明的响应式数据（如 `ref`、`computed`）、函数、props（通过 `defineProps`）和事件触发器（通过 `defineEmits`）自动暴露给模板，让代码更简洁直观；同时支持类型安全的 props 声明、v-model 自动绑定、生命周期钩子、侦听器等完整能力，是当前 Vue 3 开发中高效、推荐的主流写法。

Vue3 的 script setup 语法糖，本质是编译时的简化写法，它帮你省掉手动写 setup() { return {...} } 的步骤，所有顶层声明的变量、函数、导入的内容，会自动暴露给模板使用——不用 return，不写 this，逻辑更直觉。

基础写法：三行就能跑起来

在单文件组件（SFC）中，直接用带 setup 的