Vue3完全指南从原理到实战

Vue3 完全指南：从原理到实战

文档版本：v1.0 更新时间：2026-09-21 适用范围：前端工程师、全栈工程师、技术负责人，以及所有需要从 Vue2 迁移或从零学习 Vue3 的人 说明：版本与特性基于 2026 年 9 月 Vue 官方资料；Vue 3.5 “Tengen Toppa Gurren Lagann” 为当前最新小版本

目录

1. 概述：Vue3 是什么、为什么选它

1.1 Vue3 的定位

Vue 3 是 Vue.js 的第三个大版本，于 2020 年 9 月正式发布——它不是"Vue2 的升级版"，而是从头重写的新一代前端框架。2026 年的今天，Vue 3.5 “Tengen Toppa Gurren Lagann” 已是当前最新小版本，Vue2 已 EOL（2023 年 12 月停止维护）。

Vue3 的核心定位是：

• 渐进式框架：从小项目到大型应用都能覆盖；
• 性能优先：从头重写的响应式系统与虚拟 DOM；
• Composition API：解决大型应用的代码组织问题；
• TypeScript 原生支持：从设计之初就拥抱类型系统。

1.2 为什么选 Vue3

2026 年的现状：Vue2 已停止维护两年多，Vue3 是事实上的标准——新项目直接选 Vue3，老项目按节奏迁移。

1.3 Vue3 的设计目标

Vue3 的三个核心设计目标：

1.4 2026 年 Vue3 生态现状

2026 年 9 月的今天，Vue3 生态已经完全成熟：

关键事实：Vue2 已于 2023 年 12 月 31 日正式 EOL——不再有安全补丁、不再有新功能、社区不再维护。2026 年的今天，Vue2 是"已淘汰"的技术，Vue3 是唯一现役选择。

1.5 Vue3 的适用场景

不适合的场景：

• 极端高性能游戏/实时可视化：选 Canvas/WebGL 原生方案；
• 需要与 React 生态深度集成：如果团队主力是 React，不要硬切 Vue。

1.6 Vue3 的设计哲学

Vue3 的设计哲学可以概括为三句话：

与 React 的对比：

Vue3 的核心优势：学习曲线平缓、官方生态统一、开发效率高——这是 Vue3 在国内市场占有率持续领先的根本原因。

1.7 Vue3 与其他框架对比

选型建议：

• 国内企业：Vue3 生态最成熟，就业市场最大；
• 国际化团队：React 生态更成熟，国际社区更大；
• 小团队/快速开发：Svelte 更轻量，但生态较小；
• 长期学习：Vue3 和 React 都值得学，思路相通。

1.8 Vue3 的学习资源

学习建议：

• 入门：先看官方文档，掌握基础语法；
• 进阶：做实战项目，深入 Composition API；
• 深入：读源码，理解响应式原理；
• 生态：学习 Vite、Pinia、Nuxt 3 等生态工具。

Vue3 适合谁学：

为什么 2026 年还要学 Vue3：

2. Vue2 vs Vue3 核心区别总览

2.1 一张表看懂核心差异

2.2 迁移的本质

从 Vue2 到 Vue3 的迁移，本质上是三件事：

这不是"改几个语法"，而是"整个开发范式的升级"——但升级方向是对的，且路径清晰。

2.3 迁移的收益分析

从 Vue2 迁移到 Vue3，你能得到什么：

迁移成本：

核心结论：Vue2 已 EOL，迁移不是"要不要"，而是"什么时候"——越早迁移，技术债越少。

2.4 Vue2 到 Vue3 的渐进迁移策略

渐进迁移三步走：

#mermaid-svg-ynznx95KtWlpV66U{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-ynznx95KtWlpV66U .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-ynznx95KtWlpV66U .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-ynznx95KtWlpV66U .error-icon{fill:#552222;}#mermaid-svg-ynznx95KtWlpV66U .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ynznx95KtWlpV66U .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-ynznx95KtWlpV66U .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ynznx95KtWlpV66U .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ynznx95KtWlpV66U .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-ynznx95KtWlpV66U .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ynznx95KtWlpV66U .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ynznx95KtWlpV66U .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ynznx95KtWlpV66U .marker.cross{stroke:#333333;}#mermaid-svg-ynznx95KtWlpV66U svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ynznx95KtWlpV66U p{margin:0;}#mermaid-svg-ynznx95KtWlpV66U .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-ynznx95KtWlpV66U .cluster-label text{fill:#333;}#mermaid-svg-ynznx95KtWlpV66U .cluster-label span{color:#333;}#mermaid-svg-ynznx95KtWlpV66U .cluster-label span p{background-color:transparent;}#mermaid-svg-ynznx95KtWlpV66U .label text,#mermaid-svg-ynznx95KtWlpV66U span{fill:#333;color:#333;}#mermaid-svg-ynznx95KtWlpV66U .node rect,#mermaid-svg-ynznx95KtWlpV66U .node circle,#mermaid-svg-ynznx95KtWlpV66U .node ellipse,#mermaid-svg-ynznx95KtWlpV66U .node polygon,#mermaid-svg-ynznx95KtWlpV66U .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ynznx95KtWlpV66U .rough-node .label text,#mermaid-svg-ynznx95KtWlpV66U .node .label text,#mermaid-svg-ynznx95KtWlpV66U .image-shape .label,#mermaid-svg-ynznx95KtWlpV66U .icon-shape .label{text-anchor:middle;}#mermaid-svg-ynznx95KtWlpV66U .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-ynznx95KtWlpV66U .rough-node .label,#mermaid-svg-ynznx95KtWlpV66U .node .label,#mermaid-svg-ynznx95KtWlpV66U .image-shape .label,#mermaid-svg-ynznx95KtWlpV66U .icon-shape .label{text-align:center;}#mermaid-svg-ynznx95KtWlpV66U .node.clickable{cursor:pointer;}#mermaid-svg-ynznx95KtWlpV66U .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-ynznx95KtWlpV66U .arrowheadPath{fill:#333333;}#mermaid-svg-ynznx95KtWlpV66U .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ynznx95KtWlpV66U .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ynznx95KtWlpV66U .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-ynznx95KtWlpV66U .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-ynznx95KtWlpV66U .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-ynznx95KtWlpV66U .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-ynznx95KtWlpV66U .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ynznx95KtWlpV66U .cluster text{fill:#333;}#mermaid-svg-ynznx95KtWlpV66U .cluster span{color:#333;}#mermaid-svg-ynznx95KtWlpV66U div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ynznx95KtWlpV66U .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-ynznx95KtWlpV66U rect.text{fill:none;stroke-width:0;}#mermaid-svg-ynznx95KtWlpV66U .icon-shape,#mermaid-svg-ynznx95KtWlpV66U .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-ynznx95KtWlpV66U .icon-shape p,#mermaid-svg-ynznx95KtWlpV66U .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-ynznx95KtWlpV66U .icon-shape .label rect,#mermaid-svg-ynznx95KtWlpV66U .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-ynznx95KtWlpV66U .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-ynznx95KtWlpV66U .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-ynznx95KtWlpV66U :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

第一步：Vue2.7兼容 Vue3 语法

第二步：Vite + Vue3并行运行

第三步：全量迁移移除 Vue2

第一步：Vue2.7 兼容 Vue3 语法

Vue 2.7 是 Vue2 的最后一个版本，它 backport 了 Vue3 的 Composition API：

// Vue 2.7 中也可以用 Composition API
import { ref, computed } from 'vue';

export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return { count, doubleCount };
}
};

第二步：Vite + Vue3 并行运行

用 Vite 搭建 Vue3 项目，和 Vue2 项目并行运行，逐步把页面从 Vue2 迁移到 Vue3。

第三步：全量迁移

所有页面都迁移到 Vue3 后，移除 Vue2 项目，完成迁移。

2.5 Vue3 的生态对比

生态升级的本质：从"零散生态"到"统一生态"——Vue3 的生态更统一、更现代、更高效。

2.6 Vue3 的版本历史

版本选择建议：

• 生产环境：用最新的稳定版本（Vue 3.5+）；
• 新项目：直接用最新版本；
• 老项目：逐步升级，不要跨大版本跳跃。

版本升级注意事项：

升级建议：小版本升级通常是安全的，升级前务必跑一遍完整测试；大版本升级（如 Vue2→Vue3）需要按迁移路线图执行，不要一次性大爆炸。

3. 响应式原理：Proxy vs Object.defineProperty

3.1 Vue2 的痛点

Vue2 的响应式基于 Object.defineProperty——它有两个无法根治的问题：

// Vue2 的响应式实现（简化）
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
// 依赖收集
return val;
},
set(newVal) {
// 触发更新
val = newVal;
}
});
}

// 痛点 1：无法监听新增属性
Vue.set(vm.someObject, 'newKey', 'value'); // 必须用 Vue.set

// 痛点 2：无法监听数组索引赋值
vm.someArray[0] = 'newValue'; // 不触发更新

这两个痛点在大型应用中会变成"玄学 bug"——为什么数据变了视图没更新？答案通常是"你新增了属性或改了数组索引"。

3.2 Vue3 的解决方案：Proxy

Vue3 用 JavaScript 原生的 Proxy 替代 Object.defineProperty——它从根本上解决了这两个问题：

#mermaid-svg-NQpEe0z4aTreOGrw{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-NQpEe0z4aTreOGrw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-NQpEe0z4aTreOGrw .error-icon{fill:#552222;}#mermaid-svg-NQpEe0z4aTreOGrw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NQpEe0z4aTreOGrw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NQpEe0z4aTreOGrw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NQpEe0z4aTreOGrw .marker.cross{stroke:#333333;}#mermaid-svg-NQpEe0z4aTreOGrw svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NQpEe0z4aTreOGrw p{margin:0;}#mermaid-svg-NQpEe0z4aTreOGrw .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-NQpEe0z4aTreOGrw .cluster-label text{fill:#333;}#mermaid-svg-NQpEe0z4aTreOGrw .cluster-label span{color:#333;}#mermaid-svg-NQpEe0z4aTreOGrw .cluster-label span p{background-color:transparent;}#mermaid-svg-NQpEe0z4aTreOGrw .label text,#mermaid-svg-NQpEe0z4aTreOGrw span{fill:#333;color:#333;}#mermaid-svg-NQpEe0z4aTreOGrw .node rect,#mermaid-svg-NQpEe0z4aTreOGrw .node circle,#mermaid-svg-NQpEe0z4aTreOGrw .node ellipse,#mermaid-svg-NQpEe0z4aTreOGrw .node polygon,#mermaid-svg-NQpEe0z4aTreOGrw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NQpEe0z4aTreOGrw .rough-node .label text,#mermaid-svg-NQpEe0z4aTreOGrw .node .label text,#mermaid-svg-NQpEe0z4aTreOGrw .image-shape .label,#mermaid-svg-NQpEe0z4aTreOGrw .icon-shape .label{text-anchor:middle;}#mermaid-svg-NQpEe0z4aTreOGrw .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-NQpEe0z4aTreOGrw .rough-node .label,#mermaid-svg-NQpEe0z4aTreOGrw .node .label,#mermaid-svg-NQpEe0z4aTreOGrw .image-shape .label,#mermaid-svg-NQpEe0z4aTreOGrw .icon-shape .label{text-align:center;}#mermaid-svg-NQpEe0z4aTreOGrw .node.clickable{cursor:pointer;}#mermaid-svg-NQpEe0z4aTreOGrw .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-NQpEe0z4aTreOGrw .arrowheadPath{fill:#333333;}#mermaid-svg-NQpEe0z4aTreOGrw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-NQpEe0z4aTreOGrw .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-NQpEe0z4aTreOGrw .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-NQpEe0z4aTreOGrw .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-NQpEe0z4aTreOGrw .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-NQpEe0z4aTreOGrw .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-NQpEe0z4aTreOGrw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-NQpEe0z4aTreOGrw .cluster text{fill:#333;}#mermaid-svg-NQpEe0z4aTreOGrw .cluster span{color:#333;}#mermaid-svg-NQpEe0z4aTreOGrw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-NQpEe0z4aTreOGrw .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-NQpEe0z4aTreOGrw rect.text{fill:none;stroke-width:0;}#mermaid-svg-NQpEe0z4aTreOGrw .icon-shape,#mermaid-svg-NQpEe0z4aTreOGrw .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-NQpEe0z4aTreOGrw .icon-shape p,#mermaid-svg-NQpEe0z4aTreOGrw .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-NQpEe0z4aTreOGrw .icon-shape .label rect,#mermaid-svg-NQpEe0z4aTreOGrw .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-NQpEe0z4aTreOGrw .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-NQpEe0z4aTreOGrw .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-NQpEe0z4aTreOGrw :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Vue3: Proxy

对象

整个对象 Proxy 代理

新增属性 ✅ 响应

数组索引 ✅ 响应

Vue2: Object.defineProperty

对象

逐属性 defineProperty

新增属性 ❌ 不响应

数组索引 ❌ 不响应

Proxy 的核心优势：

3.3 响应式的两个核心 API

Vue3 提供了 ref 和 reactive 两个核心 API：

// ref：基本类型（或需要整体替换的对象）
import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0（模板中自动解包，脚本中需 .value）

// reactive：对象类型
import { reactive } from 'vue';

const state = reactive({
name: 'Vue3',
version: '3.5'
});
console.log(state.name); // 'Vue3'（无需 .value）

选型建议：

• 基本类型用 ref（number/string/boolean）；
• 对象用 reactive（object/array）；
• 不确定用 ref——更通用，且模板中自动解包。

3.4 响应式原理深度解析

Vue3 的响应式系统基于三个核心概念：Proxy、依赖收集、触发更新。

// Vue3 响应式原理（简化）
function reactive(target) {
return new Proxy(target, {
get(target, key) {
// 依赖收集：记录当前 effect 依赖了这个 key
track(target, key);
return Reflect.get(target, key);
},
set(target, key, value) {
const result = Reflect.set(target, key, value);
// 触发更新：执行所有依赖这个 key 的 effect
trigger(target, key);
return result;
}
});
}

关键流程：

与 Vue2 的本质区别：

• Vue2：初始化时递归遍历所有属性，给每个属性 defineProperty——初始化慢；
• Vue3：懒代理——只有被访问的属性才会被 Proxy 代理——初始化快。

3.5 常见响应式陷阱

最佳实践：

// 正确：用 toRefs 保持解构后的响应式
import { reactive, toRefs } from 'vue';

const state = reactive({ count: 0, name: 'Vue3' });
const { count, name } = toRefs(state);
// count 和 name 仍是响应式的

// 正确：不确定用 ref
const count = ref(0);
count.value++; // 模板中自动解包

3.6 响应式系统的性能调优

Vue3 的响应式系统虽然比 Vue2 好很多，但在极端场景下仍有性能问题：

性能调优最佳实践：

import { shallowReactive, markRaw } from 'vue';

// 1. 大型对象用 shallowReactive
const bigList = shallowReactive({ items: [] });
// 只有 bigList.items 的引用变化才触发更新，深层属性不追踪

// 2. 第三方对象用 markRaw
import Map from 'mapbox-gl';
const map = markRaw(new Map(container));
// map 不会被 Proxy 代理，性能更好

// 3. 频繁更新的数据用 shallowRef
const data = shallowRef(null);
// 手动触发更新
data.value = newData; // 只有引用变化才触发

什么时候需要调优：

• 渲染性能 profiling 显示响应式系统是瓶颈；
• 有大型数据对象（> 1000 个属性）；
• 有频繁更新的动画/实时数据。

3.7 响应式系统的内部实现

Vue3 的响应式系统基于三个核心类：

依赖收集流程：

与 Vue2 的本质区别：

• Vue2：每个属性一个 dep.id，初始化时递归遍历所有属性；
• Vue3：每个对象的每个 key 一个 Dep，懒收集——只有被访问的 key 才会被追踪。

3.8 响应式系统的常见问题

调试技巧：

import { isRef, isReactive, toRaw } from 'vue';

// 检查是不是 ref
console.log(isRef(count)); // true

// 检查是不是 reactive
console.log(isReactive(state)); // true

// 获取原始对象（跳过 Proxy）
const rawState = toRaw(state);

3.9 Vue 3.5 的响应式改进

Vue 3.5 对响应式系统做了重大改进：

onEffectCleanup 示例：

import { watchEffect, onEffectCleanup } from 'vue';

watchEffect((onCleanup) => {
const controller = new AbortController();

fetch(url, { signal: controller.signal })
.then(res => res.json())
.then(data => { /* … */ });

// 清理：下次重新执行前调用
onCleanup(() => {
controller.abort(); // 取消上一次请求
});
});

4. Composition API 详解

4.1 什么是 Composition API

Composition API 是 Vue3 的核心新特性——它解决了 Options API 在大型应用中的代码组织问题：

// ========== Vue2 的 Options API ==========
// 同一个功能的代码散落在 data、methods、computed、watch 里
export default {
data() {
return { count: 0, user: null, loading: false };
},
methods: {
increment() { this.count++; },
async fetchUser() { /* … */ }
},
computed: {
doubleCount() { return this.count * 2; }
},
watch: {
count(newVal) { /* … */ }
}
};
// 问题：同一功能的代码散落在四个地方，大型组件难以维护

// ========== Vue3 的 Composition API ==========
// 同一功能的代码集中在一起，且可以提取为独立函数
import { ref, computed, watch } from 'vue';

function useCounter() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() { count.value++; }
watch(count, (newVal) => { /* … */ });
return { count, doubleCount, increment };
}

function useUser() {
const user = ref(null);
const loading = ref(false);
async function fetchUser() { /* … */ }
return { user, loading, fetchUser };
}

export default {
setup() {
// 同一功能的代码集中使用
const { count, doubleCount, increment } = useCounter();
const { user, loading, fetchUser } = useUser();
return { count, doubleCount, increment, user, loading, fetchUser };
}
};

4.2 Composition API 的核心优势

4.3 常用的 Composition API

4.4 Composition API 实战示例：倒计时

// composables/useCountdown.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useCountdown(initialSeconds = 60) {
const seconds = ref(initialSeconds);
const isRunning = ref(false);
let timer = null;

function start() {
isRunning.value = true;
timer = setInterval(() => {
if (seconds.value > 0) {
seconds.value—;
} else {
stop();
}
}, 1000);
}

function stop() {
isRunning.value = false;
if (timer) {
clearInterval(timer);
timer = null;
}
}

function reset(newSeconds = initialSeconds) {
stop();
seconds.value = newSeconds;
}

onMounted(() => {
// 组件挂载时自动开始
start();
});

onUnmounted(() => {
// 组件卸载时清理定时器
stop();
});

return {
seconds,
isRunning,
start,
stop,
reset
};
}

在组件中使用：

<script setup>
import { useCountdown } from '@/composables/useCountdown';

const { seconds, isRunning, reset } = useCountdown(30);
</script>

<template>
<div>
<p>{{ seconds }} 秒</p>
<button @click="reset(30)" :disabled="isRunning">重置</button>
</div>
</template>

4.5 composable 提取实践

什么时候提取 composable：

composable 的命名规范：

• 以 use 开头（useUser、useCart、useCountdown）；
• 函数式，接收参数，返回状态和方法；
• 不返回 UI，只返回逻辑。

4.6 Composition API vs Options API 选型

核心结论：Composition API 是 Vue3 的长期方向——新项目直接用，老项目按节奏迁移。

4.7 Composition API 的性能考虑

性能最佳实践：

// 1. 重计算用 computed
const heavyComputed = computed(() => {
// 重计算只执行一次，缓存结果
return expensiveCalculation(props.data);
});

// 2. watch 要清理
watch(source, (newVal) => {
const timer = setInterval(() => {
// …
}, 1000);

onUnmounted(() => {
clearInterval(timer); // 清理定时器
});
});

// 3. 不要在 setup 里做异步操作
// 用 onMounted 或顶级 await

4.8 Composition API 的最佳实践

最佳实践示例：

// 好的 composable：单一职责
function useUser() {
const user = ref(null);
const loading = ref(false);

async function fetchUser(id) {
// …
}

return { user, loading, fetchUser };
}

// 不好的 composable：做了太多事
function useEverything() {
// 用户、购物车、设置、主题… 都放一起
// 违反单一职责
}

4.9 Composition API 与 React Hooks 对比

核心区别：Vue3 的响应式是自动的，React Hooks 的依赖是手动的——这是两者最大的区别，也是 Vue3 开发体验更好的根本原因。

5. <script setup> 语法糖

5.1 什么是 <script setup>

<script setup> 是 Vue3 的编译时语法糖——它让 Composition API 更简洁：

<!– 传统的 Composition API –>
<script>
import { ref, computed } from 'vue';

export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubleCount, increment };
}
};
</script>

<!– <script setup> 语法糖 –>
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() { count.value++; }
// 无需 return，顶层变量自动暴露给模板
</script>

5.2 <script setup> 的优势

5.3 Vue 3.5 的新特性：Reactive Props Destructure

Vue 3.5 新增了响应式 props 解构——解构 props 后仍保持响应式：

<script setup>
// Vue 3.5+：解构后仍保持响应式
const { name, age } = defineProps({
name: String,
age: Number
});

// 不需要 .value，且 name 和 age 仍是响应式的
console.log(name);
</script>

这是 Vue 3.5 的重要改进——以前解构 props 会丢失响应式，现在编译器自动处理。

5.4 <script setup> 进阶用法

1. 顶级 await 支持：

<script setup>
// 直接 await，编译器自动处理 Suspense
const post = await fetch(`/api/post/1`).then(r => r.json());
</script>

2. 自定义指令：

<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>

<template>
<input v-focus />
</template>

3. 命名组件：

<script setup>
// 不需要额外定义 name，文件名即组件名
// 如果需要，可以用 <script> 块补充
</script>

<script>
export default {
name: 'MyComponent'
};
</script>

4. 类型化 props 和 emits：

<script setup lang="ts">
// TypeScript 类型声明
interface Props {
name: string;
age?: number;
}

const props = withDefaults(defineProps<Props>(), {
age: 18
});

const emit = defineEmits<{
(e: 'update', value: string): void;
(e: 'delete', id: number): void;
}>();
</script>

5.5 <script setup> 常见问题

最佳实践：

<script setup>
import { ref, onMounted } from 'vue';

// DOM 引用
const inputRef = ref(null);

onMounted(() => {
inputRef.value.focus(); // 组件挂载后聚焦
});
</script>

<template>
<input ref="inputRef" />
</template>

5.6 <script setup> 与 Options API 混用

在迁移过程中，可能需要在同一个组件里混用 Options API 和 Composition API：

<script>
// 传统 Options API
export default {
name: 'MyComponent',
data() {
return { oldCount: 0 };
}
};
</script>

<script setup>
// Composition API
import { ref } from 'vue';

const newCount = ref(0);
</script>

混用注意事项：

• setup() 和 Options API 的 data/methods 是隔离的；
• 在 Options API 里可以访问 setup() 返回的变量（通过 this）；
• 不推荐长期混用——迁移完成后应该全量 Composition API。

5.7 <script setup> 的最佳实践

最佳实践示例：

<script setup lang="ts">
// 1. TypeScript 类型声明
interface Props {
title: string;
count?: number;
}

const props = withDefaults(defineProps<Props>(), {
count: 0
});

// 2. 类型化 emits
const emit = defineEmits<{
(e: 'submit', data: FormData): void;
(e: 'cancel'): void;
}>();

// 3. 暴露给父组件的内容
defineExpose({
focus: () => {
// 父组件可以通过 ref 调用
}
});
</script>

5.8 <script setup> 的常见陷阱

最佳实践：

• 安装 Volar（Vue 官方 VS Code 插件）；
• 使用 TypeScript 获得更好的类型推导；
• 保持组件简洁，不要在一个组件里写太多逻辑。

6. 组件通信：Props/Emits/Slots

6.1 Props：父传子

<!– 子组件 –>
<script setup>
const props = defineProps({
name: {
type: String,
required: true,
default: 'Vue3'
},
count: {
type: Number,
default: 0
}
});
</script>

<!– 父组件 –>
<ChildComponent name="张三" :count="10" />

6.2 Emits：子传父

<!– 子组件 –>
<script setup>
const emit = defineEmits(['update', 'delete']);

function handleUpdate() {
emit('update', { id: 1, value: 'new' });
}
</script>

<!– 父组件 –>
<ChildComponent @update="handleUpdate" @delete="handleDelete" />

6.3 Slots：内容分发

<!– 子组件 –>
<template>
<div>
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>
</div>
</template>

<!– 父组件 –>
<ChildComponent>
<template #header>标题</template>
<template #default>内容</template>
<template #footer>底部</template>
</ChildComponent>

6.4 provide/inject：依赖注入

当组件层级很深时，props 一层层传递很麻烦——provide/inject 让祖先组件直接向后代组件提供数据：

<!– 祖先组件 –>
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
const user = ref({ name: '张三', role: 'admin' });

// 提供给所有后代组件
provide('theme', theme);
provide('user', user);
</script>

<!– 深层后代组件 –>
<script setup>
import { inject, watch } from 'vue';

// 注入祖先提供的数据
const theme = inject('theme');
const user = inject('user');

console.log(theme.value); // 'dark'
</script>

最佳实践：

• 用 provide/inject 做跨层级共享，不要滥用（破坏组件封装）；
• 用 Symbol 作为 key，避免命名冲突；
• 响应式数据用 ref/reactive 提供，注入后保持响应式。

6.5 组件通信选型决策

#mermaid-svg-8X83K7MuqhNlANqT{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-8X83K7MuqhNlANqT .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-8X83K7MuqhNlANqT .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-8X83K7MuqhNlANqT .error-icon{fill:#552222;}#mermaid-svg-8X83K7MuqhNlANqT .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8X83K7MuqhNlANqT .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-8X83K7MuqhNlANqT .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8X83K7MuqhNlANqT .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8X83K7MuqhNlANqT .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-8X83K7MuqhNlANqT .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8X83K7MuqhNlANqT .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8X83K7MuqhNlANqT .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8X83K7MuqhNlANqT .marker.cross{stroke:#333333;}#mermaid-svg-8X83K7MuqhNlANqT svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8X83K7MuqhNlANqT p{margin:0;}#mermaid-svg-8X83K7MuqhNlANqT .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-8X83K7MuqhNlANqT .cluster-label text{fill:#333;}#mermaid-svg-8X83K7MuqhNlANqT .cluster-label span{color:#333;}#mermaid-svg-8X83K7MuqhNlANqT .cluster-label span p{background-color:transparent;}#mermaid-svg-8X83K7MuqhNlANqT .label text,#mermaid-svg-8X83K7MuqhNlANqT span{fill:#333;color:#333;}#mermaid-svg-8X83K7MuqhNlANqT .node rect,#mermaid-svg-8X83K7MuqhNlANqT .node circle,#mermaid-svg-8X83K7MuqhNlANqT .node ellipse,#mermaid-svg-8X83K7MuqhNlANqT .node polygon,#mermaid-svg-8X83K7MuqhNlANqT .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8X83K7MuqhNlANqT .rough-node .label text,#mermaid-svg-8X83K7MuqhNlANqT .node .label text,#mermaid-svg-8X83K7MuqhNlANqT .image-shape .label,#mermaid-svg-8X83K7MuqhNlANqT .icon-shape .label{text-anchor:middle;}#mermaid-svg-8X83K7MuqhNlANqT .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-8X83K7MuqhNlANqT .rough-node .label,#mermaid-svg-8X83K7MuqhNlANqT .node .label,#mermaid-svg-8X83K7MuqhNlANqT .image-shape .label,#mermaid-svg-8X83K7MuqhNlANqT .icon-shape .label{text-align:center;}#mermaid-svg-8X83K7MuqhNlANqT .node.clickable{cursor:pointer;}#mermaid-svg-8X83K7MuqhNlANqT .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-8X83K7MuqhNlANqT .arrowheadPath{fill:#333333;}#mermaid-svg-8X83K7MuqhNlANqT .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8X83K7MuqhNlANqT .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8X83K7MuqhNlANqT .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8X83K7MuqhNlANqT .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-8X83K7MuqhNlANqT .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8X83K7MuqhNlANqT .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-8X83K7MuqhNlANqT .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8X83K7MuqhNlANqT .cluster text{fill:#333;}#mermaid-svg-8X83K7MuqhNlANqT .cluster span{color:#333;}#mermaid-svg-8X83K7MuqhNlANqT div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8X83K7MuqhNlANqT .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-8X83K7MuqhNlANqT rect.text{fill:none;stroke-width:0;}#mermaid-svg-8X83K7MuqhNlANqT .icon-shape,#mermaid-svg-8X83K7MuqhNlANqT .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8X83K7MuqhNlANqT .icon-shape p,#mermaid-svg-8X83K7MuqhNlANqT .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-8X83K7MuqhNlANqT .icon-shape .label rect,#mermaid-svg-8X83K7MuqhNlANqT .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8X83K7MuqhNlANqT .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-8X83K7MuqhNlANqT .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-8X83K7MuqhNlANqT :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

是

是

否

是

否

否

是

否

是

否

组件通信需求

父子组件？

父→子？

Props

子→父？

Emits

v-model / 双向绑定

跨层级？

provide/inject

全局状态？

Pinia

事件总线 / 状态管理

选型建议：

6.6 组件设计原则

组件拆分示例：

UserProfile.vue（大组件）
├── UserAvatar.vue（头像）
├── UserInfo.vue（用户信息）
├── UserActions.vue（操作按钮）
└── UserOrders.vue（订单列表）

为什么要拆分：

• 更好的复用性；
• 更好的可维护性；
• 更好的测试性；
• 更好的性能（细粒度更新）。

6.7 组件通信的最佳实践

最佳实践示例：

<script setup lang="ts">
// 好的：类型化 Props 和 Emits
interface Props {
title: string;
visible: boolean;
}

const props = withDefaults(defineProps<Props>(), {
visible: true
});

const emit = defineEmits<{
(e: 'close'): void;
(e: 'confirm', value: string): void;
}>();
</script>

7. Pinia 状态管理

7.1 从 Vuex 到 Pinia

Pinia 是 Vue3 的官方推荐状态管理库——它替代了 Vuex：

7.2 Pinia 的核心概念

// stores/counter.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
// state
const count = ref(0);
// getters
const doubleCount = computed(() => count.value * 2);
// actions
function increment() {
count.value++;
}
function reset() {
count.value = 0;
}
return { count, doubleCount, increment, reset };
});

7.3 在组件中使用 Pinia

<script setup>
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();

// 直接使用
console.log(counter.count); // 0
console.log(counter.doubleCount); // 0

// 调用 action
counter.increment();
console.log(counter.count); // 1
</script>

7.4 Pinia 实战：用户 Store

// stores/user.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { loginApi, logoutApi, getUserInfoApi } from '@/api/user';

export const useUserStore = defineStore('user', () => {
// state
const token = ref(localStorage.getItem('token') || '');
const userInfo = ref(null);

// getters
const isLoggedIn = computed(() => !!token.value);
const userName = computed(() => userInfo.value?.name || '');
const isAdmin = computed(() => userInfo.value?.role === 'admin');

// actions
async function login(loginForm) {
const res = await loginApi(loginForm);
token.value = res.token;
localStorage.setItem('token', res.token);
await fetchUserInfo();
return res;
}

async function fetchUserInfo() {
if (!token.value) return;
userInfo.value = await getUserInfoApi();
}

async function logout() {
await logoutApi();
token.value = '';
userInfo.value = null;
localStorage.removeItem('token');
}

return {
token,
userInfo,
isLoggedIn,
userName,
isAdmin,
login,
fetchUserInfo,
logout
};
});

7.5 Pinia 持久化插件

// plugins/piniaPersist.js
export function piniaPersist({ store }) {
// 监听 store 变化，自动持久化到 localStorage
store.$subscribe((mutation, state) => {
localStorage.setItem(store.$id, JSON.stringify(state));
});

// 初始化时从 localStorage 恢复
const saved = localStorage.getItem(store.$id);
if (saved) {
store.$patch(JSON.parse(saved));
}
}

// main.js
import { createPinia } from 'pinia';
import { piniaPersist } from '@/plugins/piniaPersist';

const pinia = createPinia();
pinia.use(piniaPersist);

7.6 Pinia 最佳实践

常见误区：

• 所有状态都放 Pinia：错——组件局部状态用 ref/reactive 更轻量；
• store 里放 UI 状态：错——loading、modal 开关等 UI 状态应该放组件里；
• 直接修改 state：可以，但大型项目建议用 action 统一修改。

7.7 Pinia 与服务端交互

最佳实践：API 请求放在 Pinia 的 action 里：

// stores/user.js
import { defineStore } from 'pinia';
import { ref } from 'vue';
import api from '@/api';

export const useUserStore = defineStore('user', () => {
const userList = ref([]);
const loading = ref(false);
const error = ref(null);

async function fetchUsers() {
loading.value = true;
error.value = null;
try {
const res = await api.get('/users');
userList.value = res.data;
} catch (err) {
error.value = err;
} finally {
loading.value = false;
}
}

async function createUser(userData) {
loading.value = true;
try {
const res = await api.post('/users', userData);
userList.value.push(res.data);
return res.data;
} catch (err) {
error.value = err;
throw err;
} finally {
loading.value = false;
}
}

return {
userList,
loading,
error,
fetchUsers,
createUser
};
});

在组件中使用：

<script setup>
import { useUserStore } from '@/stores/user';
import { onMounted } from 'vue';

const userStore = useUserStore();

onMounted(() => {
userStore.fetchUsers();
});
</script>

7.8 Pinia 的 DevTools 与调试

Vue DevTools 是调试 Pinia 的利器：

调试技巧：

// 1. 在 store 里打印状态
console.log(userStore.$state);

// 2. 订阅 store 变化
userStore.$subscribe((mutation, state) => {
console.log('User store changed:', mutation, state);
});

// 3. 重置 store
userStore.$reset();

常见问题：

• store 不响应：检查是否在 setup 外使用；
• 状态不同步：检查是否直接修改 state；
• DevTools 不显示：检查 Vue DevTools 版本是否支持 Pinia。

7.9 Pinia 的常见陷阱

最佳实践：

• 按功能拆分 store：不要把所有状态放一个 store；
• 使用组合式语法：defineStore('id', () => {}) 比选项式更灵活；
• API 请求放 action：不要在组件里直接调 API；
• getter 纯函数：getter 不要有副作用，只做计算。

8. Vite 构建工具

8.1 为什么是 Vite

Vite 是 Vue3 推荐的构建工具——它解决了 webpack 的启动慢问题：

8.2 Vite 的核心优势

#mermaid-svg-IFGjd4LaRzUIWpci{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-IFGjd4LaRzUIWpci .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-IFGjd4LaRzUIWpci .error-icon{fill:#552222;}#mermaid-svg-IFGjd4LaRzUIWpci .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IFGjd4LaRzUIWpci .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IFGjd4LaRzUIWpci .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IFGjd4LaRzUIWpci .marker.cross{stroke:#333333;}#mermaid-svg-IFGjd4LaRzUIWpci svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IFGjd4LaRzUIWpci p{margin:0;}#mermaid-svg-IFGjd4LaRzUIWpci .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-IFGjd4LaRzUIWpci .cluster-label text{fill:#333;}#mermaid-svg-IFGjd4LaRzUIWpci .cluster-label span{color:#333;}#mermaid-svg-IFGjd4LaRzUIWpci .cluster-label span p{background-color:transparent;}#mermaid-svg-IFGjd4LaRzUIWpci .label text,#mermaid-svg-IFGjd4LaRzUIWpci span{fill:#333;color:#333;}#mermaid-svg-IFGjd4LaRzUIWpci .node rect,#mermaid-svg-IFGjd4LaRzUIWpci .node circle,#mermaid-svg-IFGjd4LaRzUIWpci .node ellipse,#mermaid-svg-IFGjd4LaRzUIWpci .node polygon,#mermaid-svg-IFGjd4LaRzUIWpci .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IFGjd4LaRzUIWpci .rough-node .label text,#mermaid-svg-IFGjd4LaRzUIWpci .node .label text,#mermaid-svg-IFGjd4LaRzUIWpci .image-shape .label,#mermaid-svg-IFGjd4LaRzUIWpci .icon-shape .label{text-anchor:middle;}#mermaid-svg-IFGjd4LaRzUIWpci .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-IFGjd4LaRzUIWpci .rough-node .label,#mermaid-svg-IFGjd4LaRzUIWpci .node .label,#mermaid-svg-IFGjd4LaRzUIWpci .image-shape .label,#mermaid-svg-IFGjd4LaRzUIWpci .icon-shape .label{text-align:center;}#mermaid-svg-IFGjd4LaRzUIWpci .node.clickable{cursor:pointer;}#mermaid-svg-IFGjd4LaRzUIWpci .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-IFGjd4LaRzUIWpci .arrowheadPath{fill:#333333;}#mermaid-svg-IFGjd4LaRzUIWpci .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IFGjd4LaRzUIWpci .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IFGjd4LaRzUIWpci .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-IFGjd4LaRzUIWpci .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-IFGjd4LaRzUIWpci .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-IFGjd4LaRzUIWpci .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-IFGjd4LaRzUIWpci .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IFGjd4LaRzUIWpci .cluster text{fill:#333;}#mermaid-svg-IFGjd4LaRzUIWpci .cluster span{color:#333;}#mermaid-svg-IFGjd4LaRzUIWpci div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-IFGjd4LaRzUIWpci .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-IFGjd4LaRzUIWpci rect.text{fill:none;stroke-width:0;}#mermaid-svg-IFGjd4LaRzUIWpci .icon-shape,#mermaid-svg-IFGjd4LaRzUIWpci .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-IFGjd4LaRzUIWpci .icon-shape p,#mermaid-svg-IFGjd4LaRzUIWpci .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-IFGjd4LaRzUIWpci .icon-shape .label rect,#mermaid-svg-IFGjd4LaRzUIWpci .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-IFGjd4LaRzUIWpci .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-IFGjd4LaRzUIWpci .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-IFGjd4LaRzUIWpci :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Vite 开发模式

启动

启动 dev server

按需编译（浏览器请求哪个文件编译哪个）

快（毫秒级）

webpack 开发模式

启动

打包整个应用

启动 dev server

慢（大型应用数分钟）

核心原理：Vite 利用浏览器原生的 ES Module——开发时不需要打包，浏览器请求哪个文件，Vite 就编译哪个文件，启动时间与应用大小无关。

8.3 创建 Vue3 项目

# 使用 create-vue（官方脚手架）
npm create vue@latest my-app

# 或使用 Vite
npm create vite@latest my-app — –template vue

8.4 Vite 配置与优化

vite.config.js 常用配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
},
server: {
port: 3000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\\/api/, '')
}
}
},
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia']
}
}
}
}
});

Vite 优化要点：

8.5 Vite 常见问题

环境变量使用：

// .env.development
VITE_API_BASE_URL=http://localhost:8080/api

// .env.production
VITE_API_BASE_URL=https://api.example.com

// 代码中使用
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

8.6 Vite 与 webpack 迁移

迁移步骤：

常见迁移坑：

8.7 Vite 的插件生态

常用插件配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import WindiCSS from 'vite-plugin-windicss';

export default defineConfig({
plugins: [
vue(),
vueJsx(),
WindiCSS()
]
});

8.8 Vite 的性能优化

性能优化最佳实践：

// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
// 拆分第三方库
vendor: ['vue', 'vue-router', 'pinia'],
// 拆分 UI 组件库
ui: ['element-plus', 'ant-design-vue']
}
}
},
// 构建压缩
minify: 'terser',
terserOptions: {
compress: {
drop_console: true // 生产环境移除 console
}
}
}
});

9. Vue Router 4

9.1 Vue Router 4 的变化

Vue Router 4 是 Vue3 对应的路由版本：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

export default router;

9.2 在组件中使用路由

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 编程式导航
function goAbout() {
router.push('/about');
}

// 获取路由参数
console.log(route.params.id);
</script>

9.3 Vue Router 4 进阶：导航守卫

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { useUserStore } from '@/stores/user';

const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue')
},
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true } // 需要登录
},
{
path: '/admin',
name: 'Admin',
component: () => import('@/views/Admin.vue'),
meta: { requiresAuth: true, requiresAdmin: true } // 需要管理员
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
const userStore = useUserStore();

// 需要登录的页面
if (to.meta.requiresAuth && !userStore.isLoggedIn) {
next('/login');
}
// 需要管理员的页面
else if (to.meta.requiresAdmin && !userStore.isAdmin) {
next('/dashboard');
}
// 正常放行
else {
next();
}
});

export default router;

路由懒加载：

// 路由级代码分割，按需加载
const routes = [
{
path: '/about',
component: () => import('@/views/About.vue') // 懒加载
}
];

9.4 Vue Router 4 常见问题

最佳实践：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

// 监听路由参数变化
watch(() => route.params.id, (newId) => {
// 根据新 id 重新加载数据
loadData(newId);
});
</script>

9.5 Vue Router 的懒加载与代码分割

路由懒加载是优化首屏加载的关键手段：

// 1. 路由级懒加载
const routes = [
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue')
}
];

// 2. 按组分包
const routes = [
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'),
children: [
{
path: 'users',
component: () => import('@/views/admin/Users.vue')
},
{
path: 'settings',
component: () => import('@/views/admin/Settings.vue')
}
]
}
];

// 3. 预加载（prefetch）
const Dashboard = defineAsyncComponent({
loader: () => import('@/views/Dashboard.vue'),
loadingComponent: LoadingSpinner,
delay: 200, // 200ms 后显示 loading
timeout: 3000 // 3s 超时
});

代码分割最佳实践：

10. Nuxt 3 SSR/元框架

10.1 什么是 Nuxt

Nuxt 是基于 Vue3 的元框架（Meta-framework）——它提供 SSR（服务端渲染）、SSG（静态站点生成）、文件路由等能力：

10.2 Nuxt 3 的核心优势

#mermaid-svg-moR14p6xOPQC7yBq{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-moR14p6xOPQC7yBq .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-moR14p6xOPQC7yBq .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-moR14p6xOPQC7yBq .error-icon{fill:#552222;}#mermaid-svg-moR14p6xOPQC7yBq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-moR14p6xOPQC7yBq .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-moR14p6xOPQC7yBq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-moR14p6xOPQC7yBq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-moR14p6xOPQC7yBq .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-moR14p6xOPQC7yBq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-moR14p6xOPQC7yBq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-moR14p6xOPQC7yBq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-moR14p6xOPQC7yBq .marker.cross{stroke:#333333;}#mermaid-svg-moR14p6xOPQC7yBq svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-moR14p6xOPQC7yBq p{margin:0;}#mermaid-svg-moR14p6xOPQC7yBq .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-moR14p6xOPQC7yBq .cluster-label text{fill:#333;}#mermaid-svg-moR14p6xOPQC7yBq .cluster-label span{color:#333;}#mermaid-svg-moR14p6xOPQC7yBq .cluster-label span p{background-color:transparent;}#mermaid-svg-moR14p6xOPQC7yBq .label text,#mermaid-svg-moR14p6xOPQC7yBq span{fill:#333;color:#333;}#mermaid-svg-moR14p6xOPQC7yBq .node rect,#mermaid-svg-moR14p6xOPQC7yBq .node circle,#mermaid-svg-moR14p6xOPQC7yBq .node ellipse,#mermaid-svg-moR14p6xOPQC7yBq .node polygon,#mermaid-svg-moR14p6xOPQC7yBq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-moR14p6xOPQC7yBq .rough-node .label text,#mermaid-svg-moR14p6xOPQC7yBq .node .label text,#mermaid-svg-moR14p6xOPQC7yBq .image-shape .label,#mermaid-svg-moR14p6xOPQC7yBq .icon-shape .label{text-anchor:middle;}#mermaid-svg-moR14p6xOPQC7yBq .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-moR14p6xOPQC7yBq .rough-node .label,#mermaid-svg-moR14p6xOPQC7yBq .node .label,#mermaid-svg-moR14p6xOPQC7yBq .image-shape .label,#mermaid-svg-moR14p6xOPQC7yBq .icon-shape .label{text-align:center;}#mermaid-svg-moR14p6xOPQC7yBq .node.clickable{cursor:pointer;}#mermaid-svg-moR14p6xOPQC7yBq .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-moR14p6xOPQC7yBq .arrowheadPath{fill:#333333;}#mermaid-svg-moR14p6xOPQC7yBq .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-moR14p6xOPQC7yBq .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-moR14p6xOPQC7yBq .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-moR14p6xOPQC7yBq .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-moR14p6xOPQC7yBq .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-moR14p6xOPQC7yBq .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-moR14p6xOPQC7yBq .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-moR14p6xOPQC7yBq .cluster text{fill:#333;}#mermaid-svg-moR14p6xOPQC7yBq .cluster span{color:#333;}#mermaid-svg-moR14p6xOPQC7yBq div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-moR14p6xOPQC7yBq .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-moR14p6xOPQC7yBq rect.text{fill:none;stroke-width:0;}#mermaid-svg-moR14p6xOPQC7yBq .icon-shape,#mermaid-svg-moR14p6xOPQC7yBq .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-moR14p6xOPQC7yBq .icon-shape p,#mermaid-svg-moR14p6xOPQC7yBq .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-moR14p6xOPQC7yBq .icon-shape .label rect,#mermaid-svg-moR14p6xOPQC7yBq .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-moR14p6xOPQC7yBq .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-moR14p6xOPQC7yBq .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-moR14p6xOPQC7yBq :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

Nuxt SSR

浏览器请求

服务端渲染 HTML

直接返回完整 HTML

首屏快 + SEO 好

传统 SPA

浏览器请求 HTML

下载 JS Bundle

浏览器渲染

首屏慢 + SEO 差

适用场景：

• 内容型网站（博客、文档、营销页）：SSG 静态生成；
• 电商/门户：SSR 服务端渲染，首屏快；
• 大型应用：Nuxt 的文件路由和自动导入提升开发效率。

10.3 Nuxt 3 实战：目录结构

my-nuxt-app/
├── assets/ # 未编译的资源（样式、图片）
├── components/ # 组件（自动导入）
├── composables/ # composable 函数（自动导入）
├── layouts/ # 布局组件
├── middleware/ # 路由中间件
├── pages/ # 页面（文件路由）
├── plugins/ # 插件
├── public/ # 静态文件
├── server/ # 服务端 API
└── nuxt.config.ts # Nuxt 配置

文件路由示例：

pages/
├── index.vue # → /
├── about.vue # → /about
├── products/
│ ├── index.vue # → /products
│ └── [id].vue # → /products/:id
└── blog/
└── [slug].vue # → /blog/:slug

自动导入：

<script setup>
// 不需要 import，Nuxt 自动导入
const products = ref([]);

// useFetch 是 Nuxt 内置的 composable
const { data: posts } = await useFetch('/api/posts');
</script>

10.4 Nuxt 3 常见问题

最佳实践：

<script setup>
// SSR 兼容：只在客户端执行
onMounted(() => {
// 这里的代码只在客户端执行
initChart();
});

// SEO：设置页面标题和 meta
useHead({
title: '首页 – My App',
meta: [
{ name: 'description', content: '这是我的 Nuxt 3 应用' }
]
});
</script>

10.5 Nuxt 3 的部署方案

部署示例：

# 1. 构建生产版本
npm run build

# 2. 启动生产服务器
node .output/server/index.mjs

# 3. 静态生成
npm run generate
# 输出到 .output/public/

部署注意事项：

• 环境变量要正确配置；
• 服务端和客户端的 API 地址要区分；
• 静态资源路径要正确配置；
• SSR 应用需要 Node.js 运行环境。

11. 新特性：Teleport/Suspense/Fragment

11.1 Teleport：传送门

Teleport 让你把组件渲染到 DOM 的其他位置——常用于模态框、通知：

<template>
<button @click="showModal = true">打开模态框</button>

<!– 模态框渲染到 body 下，而不是组件内部 –>
<Teleport to="body">
<div v-if="showModal" class="modal">
模态框内容
<button @click="showModal = false">关闭</button>
</div>
</Teleport>
</template>

11.2 Suspense：异步组件

Suspense 让你处理异步组件的加载状态：

<template>
<Suspense>
<!– 异步组件 –>
<template #default>
<AsyncComponent />
</template>
<!– 加载中显示 –>
<template #fallback>
<div>加载中…</div>
</template>
</Suspense>
</template>

11.3 Fragment：多根节点

Vue3 支持组件模板有多个根节点——不再需要包裹一层 <div>：

<!– Vue2：必须单根 –>
<template>
<div>
<header>…</header>
<main>…</main>
<footer>…</footer>
</div>
</template>

<!– Vue3：多根节点（Fragment） –>
<template>
<header>…</header>
<main>…</main>
<footer>…</footer>
</template>

11.4 v-model 多参数与新特性

Vue3 的 v-model 支持多参数——一个组件可以有多个 v-model：

<!– 子组件 –>
<script setup>
const modelValue = defineModel(); // 默认 v-model
const title = defineModel('title'); // v-model:title
</script>

<template>
<input v-model="modelValue" />
<input v-model="title" />
</template>

<!– 父组件 –>
<ChildComponent v-model="content" v-model:title="pageTitle" />

其他新特性：

12. Vue3 性能优化

12.1 编译时优化

Vue3 的编译器做了大量优化：

12.2 响应式优化

12.3 运行时优化

12.4 性能优化实战案例

案例 1：大型列表渲染优化

<!– 优化前：每次滚动都重新渲染 –>
<template>
<div v-for="item in largeList" :key="item.id">
{{ item.name }}
</div>
</template>

<!– 优化后：虚拟滚动，只渲染可视区域 –>
<template>
<RecycleScroller
:items="largeList"
:item-size="50"
key-field="id"
v-slot="{ item }"
>
<div>{{ item.name }}</div>
</RecycleScroller>
</template>

案例 2：图片懒加载

<script setup>
// 使用 Intersection Observer 实现图片懒加载
const imgRef = ref(null);

onMounted(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
observer.observe(imgRef.value);
});
</script>

<template>
<img ref="imgRef" data-src="/large-image.jpg" alt="…" />
</template>

性能优化检查清单：

12.5 性能监控与分析

性能指标：

性能分析工具：

性能优化流程：

12.6 常见性能问题与解决方案

性能优化口诀：

先测量，再优化；先找瓶颈，再动手；先做高收益，再做低收益。

13. 迁移：从 Vue2 到 Vue3

13.1 迁移路线图

#mermaid-svg-AwV1T9CrwcqLTyrp{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-AwV1T9CrwcqLTyrp .error-icon{fill:#552222;}#mermaid-svg-AwV1T9CrwcqLTyrp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-AwV1T9CrwcqLTyrp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-AwV1T9CrwcqLTyrp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-AwV1T9CrwcqLTyrp .marker.cross{stroke:#333333;}#mermaid-svg-AwV1T9CrwcqLTyrp svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-AwV1T9CrwcqLTyrp p{margin:0;}#mermaid-svg-AwV1T9CrwcqLTyrp .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster-label text{fill:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster-label span{color:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster-label span p{background-color:transparent;}#mermaid-svg-AwV1T9CrwcqLTyrp .label text,#mermaid-svg-AwV1T9CrwcqLTyrp span{fill:#333;color:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp .node rect,#mermaid-svg-AwV1T9CrwcqLTyrp .node circle,#mermaid-svg-AwV1T9CrwcqLTyrp .node ellipse,#mermaid-svg-AwV1T9CrwcqLTyrp .node polygon,#mermaid-svg-AwV1T9CrwcqLTyrp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-AwV1T9CrwcqLTyrp .rough-node .label text,#mermaid-svg-AwV1T9CrwcqLTyrp .node .label text,#mermaid-svg-AwV1T9CrwcqLTyrp .image-shape .label,#mermaid-svg-AwV1T9CrwcqLTyrp .icon-shape .label{text-anchor:middle;}#mermaid-svg-AwV1T9CrwcqLTyrp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-AwV1T9CrwcqLTyrp .rough-node .label,#mermaid-svg-AwV1T9CrwcqLTyrp .node .label,#mermaid-svg-AwV1T9CrwcqLTyrp .image-shape .label,#mermaid-svg-AwV1T9CrwcqLTyrp .icon-shape .label{text-align:center;}#mermaid-svg-AwV1T9CrwcqLTyrp .node.clickable{cursor:pointer;}#mermaid-svg-AwV1T9CrwcqLTyrp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-AwV1T9CrwcqLTyrp .arrowheadPath{fill:#333333;}#mermaid-svg-AwV1T9CrwcqLTyrp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-AwV1T9CrwcqLTyrp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-AwV1T9CrwcqLTyrp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-AwV1T9CrwcqLTyrp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-AwV1T9CrwcqLTyrp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-AwV1T9CrwcqLTyrp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster text{fill:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp .cluster span{color:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-AwV1T9CrwcqLTyrp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-AwV1T9CrwcqLTyrp rect.text{fill:none;stroke-width:0;}#mermaid-svg-AwV1T9CrwcqLTyrp .icon-shape,#mermaid-svg-AwV1T9CrwcqLTyrp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-AwV1T9CrwcqLTyrp .icon-shape p,#mermaid-svg-AwV1T9CrwcqLTyrp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-AwV1T9CrwcqLTyrp .icon-shape .label rect,#mermaid-svg-AwV1T9CrwcqLTyrp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-AwV1T9CrwcqLTyrp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-AwV1T9CrwcqLTyrp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-AwV1T9CrwcqLTyrp :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

1 依赖升级Vue2.7 + Vite

2 响应式迁移defineProperty → Proxy

3 API 迁移Options → Composition

4 生态迁移Vuex → Pinia + Router 4

5 新特性采用Teleport/Suspense

6 性能优化编译时 + 响应式

13.2 常见迁移坑

13.3 迁移检查清单

第一步：环境准备

• 升级 Node.js 到 18+
• 升级 npm/pnpm/yarn
• 安装 Vue 3 + Vite

第二步：依赖升级

• Vue 2.x → Vue 3.x
• Vue Router 3 → 4
• Vuex → Pinia
• 组件库升级到 Vue3 版本（Element Plus / Ant Design Vue 等）

第三步：代码迁移

• 生命周期改名（beforeDestroy → onBeforeUnmount）
• 移除 Vue.set / Vue.delete
• 逐步迁移到 Composition API
• 修复 v-model 语法变化
• 修复事件总线（$on/$off 已移除）

第四步：测试验证

• 单元测试迁移
• E2E 测试迁移
• 功能回归测试
• 性能对比测试

13.4 迁移实战案例

案例：中型企业管理系统迁移

迁移中的坑：

13.5 迁移后的优化与改进

迁移到 Vue3 后，可以做这些优化：

迁移后的收益：

• 性能提升 1~2 倍：Proxy 响应式 + 编译时优化；
• 开发效率提升：Vite 极快启动 + 热更新；
• 代码质量提升：Composition API + TypeScript；
• 维护性提升：Vue2 已 EOL，Vue3 持续迭代。

14. 总结与未来方向

14.1 Vue3 的核心价值

14.2 未来方向

14.3 最后的话

Vue3 不是"Vue2 的升级版"，而是从头重写的新一代前端框架——Proxy 响应式、Composition API、Vite、Pinia、Nuxt3，每一层都是一次换代。Vue2 已 EOL，Vue3 是事实上的标准——新项目直接选 Vue3，老项目按节奏迁移。

升级 Vue3 的最大收益不是"性能提升"，而是"代码组织"——Composition API 让大型应用的代码不再散落在四个选项里，而是集中在同一功能块。这是 Vue3 最被低估、也是最有价值的改进。

14.4 学习路线与资源推荐

学习路线：

推荐资源：

生态推荐：

14.5 总结与展望

Vue3 的核心价值：

未来展望：

最后的建议：

• 新项目：直接用 Vue3 + <script setup> + Pinia + Vite；
• 老项目：按节奏迁移，不要一次性大爆炸；
• 学习路径：先掌握基础语法，再深入原理和源码；
• 生态选择：优先用官方推荐的生态（Vite/Pinia/Nuxt）。

Vue3 不是"Vue2 的升级版"，而是"新一代前端框架"——它从响应式原理、代码组织、类型支持、构建工具每一层都做了换代。2026 年的今天，Vue2 已 EOL，Vue3 是事实上的标准——这是你的不二之选。

14.6 常见问题 FAQ

学习建议：

• 新手：从官方文档入门，掌握基础语法；
• Vue2 老司机：重点学 Composition API 和 Pinia；
• 进阶：深入响应式原理和源码；
• 实战：做一个完整项目，把生态工具都用一遍。

修订记录

本文档基于 2026 年 9 月 Vue 官方资料整理；Vue 3.5 “Tengen Toppa Gurren Lagann” 为当前最新小版本；具体 API 请以官方文档为准。