Vue3Crush与Vue2相比，有哪些颠覆性亮点？

Vue 3 + Vite + TypeScript 实战手册 这份手册基于当前 companyDashboard 项目整理。除明确标注“可选扩展”的部分外，文中的目录、命令和代码都以当前项目为准，可直接对照工程阅读。 GitHub 仓库：https://github.com/kunyashaw/vue3Crush 目录 1. Vue 2 与 Vue 3 特性对比总表 核心 API 速查表 2. 工程总览 3. 初始化与依赖安装 4. Plop 模块与 hbs 模板 5. 应用入口与路由骨架 6. Store 与 Composable 7. 各个 View 实战代码 8. Teleport 与全局 UI 模块 9. 单元测试实践 10. 常见坑 1. Vue 2 与 Vue 3 特性对比总表 先把这部分放在前面，方便对整个技术栈先建立一个整体判断。 对比维度 Vue 2 Vue 3 实战意义 框架入口 new Vue() createApp() 应用实例边界更清晰，适合多实例与插件隔离 核心 API 风格 Options API 为主 Composition API 与 Options API 并存 逻辑可按“业务能力”聚合，不再被 data / methods / computed 打散 响应式底层 Object.defineProperty Proxy + effect 调度体系 对数组、动态属性、新旧值追踪都更自然 单值响应式 状态通常统一放在 data / computed 中管理 ref() 在 JS / TS 中显式 .value，类型推导更直观 对象响应式 data() 返回对象统一管理 reactive() 更适合复杂状态容器，但解构时要注意丢响应式 逻辑复用 mixins、高阶组件、renderless component composables 复用逻辑来源更清晰，命名冲突更少 TypeScript 支持 支持一般，类型推导较吃力 官方支持明显更成熟 大型项目的开发体验提升很明显 多根节点 不支持 支持 Fragment 模板不必再被无意义的包裹 div 污染 Teleport 无原生能力 原生支持 弹窗、抽屉、全局提示更容易摆脱层级限制 Suspense 无 原生支持 异步组件和加载态处理更统一 Tree-shaking 效果有限 更友好 没用到的 API 更容易被摇掉，构建体积更可控 生命周期入口 beforeCreate / created setup() + 各类 hooks setup 不是传统意义生命周期钩子，而是组合式逻辑入口 组件通信 props / $emit / provide/inject / event bus props / emits / provide / inject 组件契约更清晰，Event Bus 不再是主流方案 全局状态 Vuex 常见 Pinia 成为官方推荐 API 更轻，TS 体验更好，心智负担更低 路由使用方式 this.$router、this.$route useRouter()、useRoute() 组合式函数更适合 script setup 模板语法 v-model 默认 value / input 语义 v-model 更统一，支持多个 v-model 自定义组件双向绑定更灵活 自定义事件声明 约定式为主 emits 显式声明 组件契约更清晰，利于 TS 和团队协作 过滤器 Filters 常见 已移除主流地位 推荐改用 computed、方法或格式化函数 this 使用习惯 大量依赖 this script setup 基本不依赖 this 代码更贴近原生 JS / TS 思维 性能优化 以运行时优化为主 编译期 + 运行时协同优化 静态提升、Patch Flag 等让渲染更高效 自定义渲染器 生态层面相对弱 提供更强 runtime-core 能力 更容易扩展到非 DOM 平台 生态主流 Vue CLI、Vuex Vite、Pinia、SFC <script setup> 新项目大多默认围绕 Vue 3 工具链构建 1.1 站在实际项目角度，Vue 3 最值钱的升级是什么 Composition API 让业务逻辑真正可以抽走复用。 Pinia 让全局状态写起来比传统 Vuex 更轻。 script setup 把组件样板代码砍掉了一大截。 Teleport、Suspense、Fragments 这些能力，让模板组织更自然。 对 TypeScript 的支持成熟得多，特别适合中大型项目。