Vue 3.2+ 官方推荐的编译时语法糖 <script setup> 省去 setup() 函数和 return，顶层声明自动暴露给模板，支持响应式 API、defineProps/defineEmits 类型推导及 defineExpose 显式暴露。
<script setup> 是 Vue 3.2+ 官方推荐的编译时语法糖，它把原本需要包裹在 <code>setup() 函数里、再手动 <code>return 暴露的逻辑，直接“提”到脚本顶层——所有声明的变量、函数、导入的组件和工具，自动对模板可见，省去样板代码，让结构更紧凑、意图更清晰。</script></p> <h3>省掉 setup 函数和 return 语句</h3> <p>传统写法需显式导出对象并返回响应式数据与方法；<script setup> 中无需 <code>export default，也不用 <code>return。只要在顶层声明，就默认暴露给 <code><template>：</script></p> <ul> <li> <code>const count = ref(0)</code> → 模板中直接写 <code>{{ count }}</code>（自动解包）</li> <li> <code>function handleClick() { ... }</code> → 模板中直接用 <code>@click="handleClick"</code> </li> <li> <code>import Button from './Button.vue'</code> → 模板中直接写 <code><Button /></code>，无需 <code>components: { Button }</code> </li> </ul> <h3>响应式声明更直觉，但规则要记牢</h3> <p>必须用 <code>ref()</code>、<code>reactive()</code> 等 API 创建响应式数据，普通变量不响应：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8748" title="vue-composition-api-best-practices"><img src="https://img.php.cn/upload/skill/000/000/081/179222222327548.jpg" alt="vue-composition-api-best-practices" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8748" title="vue-composition-api-best-practices">vue-composition-api-best-practices</a> <p>Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p> </div> <a href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>const count = ref(0)</code>：模板读取用 <code>{{ count }}</code>，赋值仍需 <code>count.value++</code> </li> <li> <code>const state = reactive({ name: 'Alice' })</code>：模板中可直接 <code>{{ state.name }}</code>，修改也直接 <code>state.name = 'Bob'</code> </li> <li>避免 <code>let count = 0</code> 或 <code>count = ref(0); count = 5</code>（const 不允许重赋值引用）</li> </ul> <h3>Props 和 Emits 用宏函数声明，类型即文档</h3> <p><code>defineProps</code> 和 <code>defineEmits</code> 是编译时宏，不需 import，支持完整 TypeScript 类型推导：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>Props 推荐对象写法：<code>defineProps({ title: { type: String, required: true } })</code> </li> <li>Vue 3.5+ 支持安全解构：<code>const { title, likes } = defineProps()</code>，解构后仍是响应式</li> <li>Emits 可写数组形式：<code>defineEmits(['submit', 'cancel'])</code>，或事件签名形式：<code>defineEmits()</code> </li> <li>不要在 <code>onMounted</code> 里处理 props —— <script setup> 没有 this，也没有 setup 函数上下文</script>
子组件通信与生命周期更轻量
需要父组件调用子组件方法时，用 defineExpose 显式暴露；生命周期钩子需显式 import，但调用更自然：
- 子组件内：
defineExpose({ reset, getData })，父组件通过ref即可调用 - 生命周期如
onMounted、watch需先import { onMounted, watch } from 'vue'，然后直接写onMounted(() => {...}) - 所有组合式 API 都是按需导入，无隐式依赖，IDE 类型提示精准
