Vue 2 项目想升 Vue 3 不知道从哪下手？Composition API 用了半天还是写成 Options 写法？Vue 3 是 2024 之后 Vue 生态的绝对主流，但响应式原理、组合式 API、TypeScript 集成都是新东西。这份资源整合 Vue 3 核心源码 + 1.9MB 官方组件库，从原理到实战全覆盖。

[判断标准] 你的项目是否该升级到 Vue 3

符合任意两项就该升：需要更好的 TypeScript 支持、需要 Tree-shaking 减少体积、需要 Composition API 复用逻辑、依赖 Vue 3 生态（如 Pinia、Vue Router 4）。

[关键参数] 响应式系统的 ref / reactive / computed

ref 包装基本类型（.value 访问），reactive 包装对象。computed 必须用于派生状态，watch 用于副作用。shallowRef / shallowReactive 适合大对象避免深层代理。

[避坑点] 不要在 reactive() 里放整个组件实例

很多新人把整个组件状态塞进 reactive()，导致 this 访问混乱。Vue 3 推荐 script setup + 每个变量单独 ref/computed，逻辑用 composables 函数抽取复用。

[易踩坑] Vue 2 与 Vue 3 组件混用的过渡期

大型项目不可能一次性升级。资源包演示了「Vue 2 主项目 + 独立 Vue 3 微前端」「@vue/compat 兼容模式」两种渐进方案，避免企业项目被迫停服重写。

[场景建议] 5 类 Vue 3 实战组件模式

①表单组件：v-model + 类型校验；②列表组件：虚拟滚动 + 排序筛选；③弹窗组件：Teleport + 动画；④路由组件：Vue Router 4 + 守卫；⑤状态管理：Pinia 替代 Vuex。

总结：资源包含 Vue 3 框架核心源码、官方组件库精选、组合式 API 实战案例、TypeScript 集成示例。源码程序 npm i 后直接运行。