Vue3 的 script setup 语法糖是编译时简化写法，自动暴露顶层声明，无需 return；用 defineProps 接收 props，defineEmits 触发事件，配合 ref、computed 等组合式 API 使用。
Vue3 的 script setup 语法糖，本质是编译时的简化写法，它帮你省掉手动写 setup() { return {...} } 的步骤，所有顶层声明的变量、函数、导入的内容，会自动暴露给模板使用——不用 return，不写 this，逻辑更直觉。
基础写法：三行就能跑起来
在单文件组件（SFC）中，直接用带 setup 的 <script> 标签：
-
<script setup>开头，不需要export default - 用
ref或reactive声明响应式数据，比如const count = ref(0) - 定义函数直接写，比如
const increment = () => count.value++ - 模板里直接写
{{ count }}或@click="increment"，无需加props.或methods.
接收和使用 props
用 defineProps 声明父组件传来的属性，支持类型检查和默认值：
- 对象写法（推荐）：
const props = defineProps({ title: String, disabled: { type: Boolean, default: false } }) - 模板中直接用
{{ title }}，不是{{ props.title }} - 需要运行时校验？加
validator：age: { type: Number, validator: v => v > 0 } - 注意：props 是只读响应式对象，不要直接赋值；要改请通过
emit通知父组件
触发事件与父子通信
子组件想通知父组件状态变化，用 defineEmits：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
const emit = defineEmits(['update:modelValue', 'submit'])- 触发时写
emit('submit', payload)，父组件用@submit="handler"接收 - v-model 支持：若子组件 props 叫
modelValue，且 emitupdate: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 的通信约定，比记住语法更重要。
