Vue3 以组合式 API（Composition API）重新组织了组件逻辑，配合 Vite 构建、Pinia 状态管理与 TypeScript 支持，成为当前国内前端开发的主流方案。本讲从零到实战，带你构建完整、可上线的 Vue3 应用。
<script setup> import { ref, computed } from 'vue' const count = ref(0) const double = computed(() => count.value * 2) function inc() { count.value++ }
选项式 API 把同一段业务逻辑拆散在 data/methods/watch 里，需求一变就改得头晕。
props 层层透传、事件满天飞，兄弟组件传个值还得绕道父组件，维护成本直线上升。
会写组件但不会配 Vite、不会接接口、不会部署，做出来的东西只能停留在本地 Demo。
把这四块吃透，你就掌握了 Vue3 的"道"——剩下的都是熟练度问题。
基于 Proxy 的响应式数据，ref 与 reactive 的取舍、深层响应与依赖收集的原理。
setup、生命周期钩子与逻辑复用（composable），把关联逻辑聚合在一起，告别选项式散落。
props/emit、provide/inject、事件总线与 Pinia，不同场景的通信选型。
现代 Vue 状态方案，组合式写法 + devtools 支持 + 模块化 store 设计。
秒级热更新、按需引入、环境变量与构建优化，现代前端工程标配。
Vue Router 4 的动态路由、嵌套路由与导航守卫，SPA 应用骨架。
照着这条被验证过的路径走，2-4 周即可独立开发完整应用。
模板语法、指令、事件与表单绑定，先能写出页面。
ref/reactive/computed/watch，理解数据驱动视图。
组件拆分、props/emit、插槽与 composable 逻辑复用。
Vue Router 与 Pinia，构建完整的多页面应用。
Vite 配置、代码规范、测试与部署，交付生产级应用。
两张表看懂差异，新项目直接用组合式，不纠结。
| 对比维度 | 选项式 Options | 组合式 Composition |
|---|---|---|
| 逻辑组织 | 按 data/methods 分散 | 按业务功能聚合 |
| 逻辑复用 | Mixin（易冲突） | Composable（组合式函数） |
| TypeScript | 推断较弱 | 类型友好 |
| 可维护性 | 组件变大后混乱 | 模块化清晰 |
| 上手门槛 | 入门直观 | 需理解响应式原理 |
| 官方推荐 | 存量兼容 | 新项目首选 |
商品列表、购物车、结算流程，Vue3 的响应式与组件化让复杂交互井井有条。
表格、表单、权限、看板，Vue3 + Element Plus / Ant Design Vue 是后台开发事实标准。
营销型官网 + CMS 后台，Vue3 保证首屏性能与 SEO 需求，配合 SSR 更佳。
配合 uni-app / Taro 一套代码多端运行，Vue3 语法直接迁移。
<script setup>。