vue3 的 script setup 语法糖是编译时简化写法，自动暴露顶层声明，无需 return；用 defineprops 接收 props，defineemits 触发事件，配合 ref、computed 等组合式 api 使用。

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

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

在单文件组件（SFC）中，直接用带 setup 的 <script></script> 标签：

• <script setup></script> 开头，不需要 export default
• 用 ref 或 reactive 声明响应式数据，比如 const count = ref(0)
• 定义函数直接写，比如 const increment = () => count.value++
• 模板里直接写 {{ count }} 或 @click="increment"，无需加 props. 或 methods.

接收和使用 props

用 defineProps 声明父组件传来的属性，支持类型检查和默认值：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 对象写法（推荐）：const props = defineProps({ title: String, disabled: { type: Boolean, default: false } })
• 模板中直接用 {{ title }}，不是 {{ props.title }}
• 需要运行时校验？加 validator：age: { type: Number, validator: v => v > 0 }
• 注意：props 是只读响应式对象，不要直接赋值；要改请通过 emit 通知父组件

触发事件与父子通信

子组件想通知父组件状态变化，用 defineEmits：

• const emit = defineEmits(['update:modelValue', 'submit'])
• 触发时写 emit('submit', payload)，父组件用 @submit="handler" 接收
• v-model 支持：若子组件 props 叫 modelValue，且 emit update:modelValue，父组件就能直接写 v-model="xxx"

其他常用组合式 API

生命周期、计算属性、侦听器等，都按需导入使用：

• 生命周期：onMounted(() => console.log('已挂载'))
• 计算属性：const double = computed(() => count.value * 2)
• 侦听器：watch(count, (newVal) => console.log(newVal)) 或 watchEffect(() => console.log(count.value))
• 解构响应式对象？用 toRefs 避免丢失响应性：const { name, age } = toRefs(data)

不复杂但容易忽略：语法糖只是写法简化，底层仍是组合式 API。理解 ref 的 .value、props 的只读性、emit 的通信约定，比记住语法更重要。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！