主题
Vue3 技术栈总览
一句话定位：Vue3 = 组合式 API（setup）+ 基于 Proxy 的响应式系统 + 编译器优化的模板渲染，配套 Router（路由）、Pinia（状态）、Vite（构建）构成完整前端开发栈；相比 Vue2，核心变化是「响应式换引擎（defineProperty → Proxy）」和「组织方式换范式（选项式 → 组合式）」。
组件栈地图
| 层 | 组件 | 职责与关键特性 |
|---|---|---|
| 核心 | Vue3 | 响应式（ref/reactive/computed/watch）+ 组合式 API（setup）+ 生命周期 |
| 路由 | Vue Router 4 | URL ↔ 视图映射；useRouter 跳转 / useRoute 读参 / 全局守卫 |
| 状态 | Pinia | 跨组件共享状态；defineStore + storeToRefs，取代 Vuex |
| 构建 | Vite | 开发服务器（esbuild）+ 打包（rollup），替代 Vue CLI |
| UI | Element Plus | 组件库 |
| 数据请求 | Axios | HTTP 客户端（拦截器/超时/取消） |
Vue2 → Vue3 完整变化
| 维度 | Vue2 | Vue3 |
|---|---|---|
| 响应式 | Object.defineProperty（监听不到新增/删除属性、数组索引） | Proxy（全量拦截） |
| 组织 | 选项式 API（data/methods/mounted） | 组合式 API（<script setup> + setup()） |
| 状态 | Vuex（含 mutations） | Pinia（去 mutations） |
| 构建 | Vue CLI（webpack） | Vite（esbuild/rollup） |
| 生命周期 | beforeDestroy/destroyed | onBeforeUnmount/onUnmounted |
| 逻辑复用 | mixin（易冲突） | 组合式函数 + Hook |
学习路径（对应 Leo 素材 12 步）
前端工程化 → ECMAScript → 环境搭建 → Vue 基础 → 生命周期 → 组件 → 静态资源 → Router → Element Plus → Axios → Pinia → 项目实战
不变量（必须成立的约束）
- 组合式 API 的响应式数据必须用
ref/reactive定义，普通变量改了不会触发视图更新。 - Router / Pinia 都是「先安装注册（
app.use）、再在setup里通过 use 函数取实例」。 - 配套生态（Router/Pinia）解耦为独立库，须分别安装 + 挂载。
常见误解
- 以为 Vue3 只是 Vue2 的小版本升级 → 实为响应式引擎 + 组织范式双重换代。
- 以为必须用组合式 API → Options API 仍兼容，只是组合式更利于逻辑复用与 TS 支持。
关联
- 响应式：概念卡片：Vue3响应式原理
- 生命周期：概念卡片：Vue3生命周期
- 路由：概念卡片：VueRouter路由机制
- 状态：概念卡片：Pinia状态管理
- 对标的 React：React技术栈总览