第 10 章 现代 Vue 开发（Vue 3）

第 10 章 · 现代 Vue 开发（Vue 3）

章节摘要：Vue 3 不是推倒重来，而是渲染管线每一站的升级——响应式换 Proxy、编译器会产出更薄的代码、Composition API 让逻辑按功能聚合。本章对照前面章节讲 Composition API 的组织哲学、Vue 3 全部关键新特性、以及 Vite 为核心的现代工具链与生态。

学习目标

阅读完本章，你应当能够：

1. 用 setup 与组合函数组织逻辑，说清它解决了选项式的什么痛；
2. 逐项列出 Vue 3 相对 Vue 2 的管线级改进及其前面章节的对应原理；
3. 解释 Vite 快的原因（按需编译与原生模块）；
4. 规划 Vue 2 工程向 Vue 3 的迁移。

核心概念速览

每一条升级都能在前九章找到对应：换的是零件，管线没变——这正是读本教程的复利时刻。

子章节导航

10.1 Composition API

setup、ref 与 reactive、生命周期对位、组合函数的抽取与复用。

10.2 Vue 3 新特性

多根节点、Teleport、Suspense、以及编译期优化的原理兑现。

10.3 构建工具与生态

Vite 快的机理、TypeScript 深度集成、迁移路线与生态全景。

子章节之间的逻辑关系

10.1 讲写代码的方式（逻辑组织），10.2 讲框架能力与性能（管线升级），10.3 讲工程底盘（构建与生态）。三节合起来构成"现代 Vue 开发"的完整图景。

Composition API（怎么写）
        ↓
新特性与编译优化（跑得更好）
        ↓
Vite 与生态（工程怎么建）
​

前置知识与后续延伸

• 前置：第 2 章响应式机制（Proxy 章节的伏笔）、第 3 章编译三阶段（静态提升的落点）；
• 为后续铺路：第 11 章的项目架构规范将以组合式 API 与 Vite 工程为默认基座。

关于"要不要学 Composition API"的犹豫，给一个直接的判断：这是当前 Vue 生态的主流写法，新岗位的招聘要求、新库的文档示例、社区的组件与组合函数几乎清一色组合式，选项式 API 仍是合法写法但已成"读得懂就够"的存量技能。学习成本真实存在（主要是 ref 的 value 心智与响应式边界意识），但本册第 2 章铺垫过的机制知识会让这个过程比想象中平滑——你会发现 setup 里的每一行都能在前面的章节找到原理出处。