第 111 章：为什么学 Vue 3

学习目标

了解 Vue 3 的核心优势与设计哲学
理解 Vue 3 相比 Vue 2 的核心变化
掌握 Composition API 的思维方式
能在团队选型时给出 Vue 3 的判断依据

一、Vue 3 是什么

Vue 3 是 Vue.js 的第三代主版本,2020 年 9 月发布,目前已成为前端三大主流框架之一。

1.1 一句话定义

Vue 3 是一个渐进式的、用于构建用户界面的 JavaScript 框架,核心库只关注视图层。

1.2 核心特性

🚀 更快:重写虚拟 DOM,Tree-shaking 友好
🧩 更小:核心运行时 ~10KB gzipped
💎 更好用:Composition API + <script setup> 语法糖
🛡️ 更稳:原生支持 TypeScript
🔧 更灵活:自定义渲染器(支持 Web、小程序、原生应用)

二、Vue 3 vs Vue 2

2.1 性能提升

指标	Vue 2	Vue 3
打包大小	~32KB	~10KB
初次渲染	较慢	提升 1.3-2 倍
更新渲染	较慢	提升 1.3-2 倍
内存占用	较多	减少 40-50%

2.2 核心变化

typescript

// ✅ Vue 3 推荐:Composition API + <script setup>
<script setup lang="ts">
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

const increment = () => count.value++;
</script>

<template>
  <div>
    <p>{{ count }} × 2 = {{ doubled }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

typescript

// ❌ Vue 2 风格:Options API
<script>
export default {
  data() {
    return { count: 0 };
  },
  computed: {
    doubled() { return this.count * 2; }
  },
  methods: {
    increment() { this.count++; }
  }
};
</script>

2.3 其他变化

维度	Vue 2	Vue 3
API 风格	Options API	Composition API(也保留 Options)
TypeScript	第三方支持	原生支持
Fragment	❌ 需单根	✅ 多根节点
Teleport	❌	✅ 新增
Suspense	❌	✅ 新增
v-model	一个值	多个值
生命周期	beforeDestroy	`onBeforeUnmount`
过滤器	✅	❌ 移除

三、Composition API 的核心思维

3.1 为什么需要 Composition API

问题:Options API 在大型组件中,同一业务逻辑被拆分到不同选项(data/computed/methods/mounted),维护困难。

typescript

// ❌ Options API:同一功能的代码分散在 4 个地方
<script>
export default {
  data() { return { user: null, loading: false }; },
  computed: { userName() { return this.user?.name; } },
  methods: { fetchUser() { /* ... */ } },
  mounted() { this.fetchUser(); }
};
</script>

typescript

// ✅ Composition API:同一功能的代码集中在一起
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const user = ref<User | null>(null);
const loading = ref(false);
const userName = computed(() => user.value?.name);

const fetchUser = async () => {
  loading.value = true;
  user.value = await api.getUser();
  loading.value = false;
};

onMounted(fetchUser);
</script>

3.2 逻辑复用:从 mixin 到 composable

typescript

// ❌ Vue 2 mixin: 命名冲突、来源不清
export default {
  mixins: [fetchMixin, logMixin]
};

// ✅ Vue 3 composable: 显式调用、类型友好
import { useFetch } from '@/composables/useFetch';
import { useLogger } from '@/composables/useLogger';

const { data, loading } = useFetch('/api/users');
useLogger('users-loaded');

四、Vue 3 生态全家桶

4.1 工具链

工具	作用	推荐
Vite	构建工具	✅ 首选
Volar	VSCode 插件	✅ Vue 3 必备
Pinia	状态管理	✅ Vue 3 官方推荐
Vue Router	路由	✅ 官方
Vitest	测试	✅ 与 Vite 同源
VueUse	工具集	✅ 强烈推荐
Element Plus	组件库	✅ 国内主流
Naive UI	组件库	✅ TS 友好

五、Vue 3 适合什么场景

5.1 ✅ 推荐场景

企业内部系统:组件库丰富,开发效率高
中后台项目:Element Plus、Naive UI 加持
移动端 H5:Vue 3 + Vant 4
多端应用:uni-app 基于 Vue 3
静态站点:VitePress(本套文档即用)
从 Vue 2 升级:平滑过渡,生态完善

5.2 ❌ 不推荐场景

极致性能需求:直接用原生 JS 或 Solid.js
SEO 重的门户:考虑 Nuxt 3 / Next.js
超大型前端:React 生态更广

六、企业级项目结构示例

enterprise-app/
├── public/                 # 静态资源
├── src/
│   ├── api/                # 接口请求
│   │   ├── user.ts
│   │   └── index.ts
│   ├── assets/             # 资源
│   ├── components/         # 公共组件
│   │   ├── common/         # 基础组件
│   │   └── business/       # 业务组件
│   ├── composables/        # 自定义 hooks
│   │   ├── useFetch.ts
│   │   └── useAuth.ts
│   ├── directives/         # 自定义指令
│   ├── layouts/            # 布局
│   ├── pages/              # 页面
│   ├── plugins/            # 插件
│   ├── router/             # 路由
│   ├── stores/             # Pinia stores
│   ├── styles/             # 全局样式
│   ├── types/              # 类型定义
│   ├── utils/              # 工具函数
│   ├── views/              # 视图组件
│   ├── App.vue
│   └── main.ts
├── tests/                  # 测试
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

七、学习路径建议

阶段	章节	重点
入门	111-115	概念、环境、模板、响应式
组件化	116-120	组件、Props、Slots、生命周期
组合式 API	121-125	setup、computed、watch、hooks
生态	126-130	Router、Pinia、组件库
工程化	131-135	Vite、ESLint、Vitest、性能
实战	136-140	架构、权限、国际化

八、常见误解澄清

8.1 Vue 3 一定要用 Composition API 吗?

不是。Options API 仍然支持,大型组件才强烈推荐 Composition API。

8.2 Vue 3 = Composition API?

不是。Vue 3 是框架版本,Composition API 是其中一种编码风格。

8.3 必须用 TypeScript 吗?

不是。但 TypeScript + Vue 3 是黄金组合,强烈推荐。

8.4 Vue 3 难学吗?

不难。如果你会 Vue 2,1-2 天即可上手;新手 3-5 天能掌握基础。

九、本章小结

要点	关键
Vue 3 定位	渐进式前端框架,核心只关注视图
核心优势	更快、更小、更好用、更稳
核心变化	Composition API + 原生 TS 支持
适用场景	中后台、企业系统、移动端 H5
学习前提	HTML / CSS / JavaScript / ES6

动手练习

对比表格:列出你当前熟悉的框架与 Vue 3 的 5 个核心差异
生态调研:访问 vuejs.org,了解 Vue 3 最新版本号和更新内容
项目目标:列出你想用 Vue 3 做的项目或功能模块

第 111 章：为什么学 Vue 3 ​

一、Vue 3 是什么 ​

1.1 一句话定义 ​

1.2 核心特性 ​

二、Vue 3 vs Vue 2 ​

2.1 性能提升 ​

2.2 核心变化 ​

2.3 其他变化 ​

三、Composition API 的核心思维 ​

3.1 为什么需要 Composition API ​

3.2 逻辑复用:从 mixin 到 composable ​

四、Vue 3 生态全家桶 ​

4.1 工具链 ​

五、Vue 3 适合什么场景 ​

5.1 ✅ 推荐场景 ​

5.2 ❌ 不推荐场景 ​

六、企业级项目结构示例 ​

七、学习路径建议 ​

八、常见误解澄清 ​

8.1 Vue 3 一定要用 Composition API 吗? ​

8.2 Vue 3 = Composition API? ​

8.3 必须用 TypeScript 吗? ​

8.4 Vue 3 难学吗? ​

九、本章小结 ​

动手练习 ​

推荐阅读 ​

第 111 章：为什么学 Vue 3

一、Vue 3 是什么

1.1 一句话定义

1.2 核心特性

二、Vue 3 vs Vue 2

2.1 性能提升

2.2 核心变化

2.3 其他变化

三、Composition API 的核心思维

3.1 为什么需要 Composition API

3.2 逻辑复用:从 mixin 到 composable

四、Vue 3 生态全家桶

4.1 工具链

五、Vue 3 适合什么场景

5.1 ✅ 推荐场景

5.2 ❌ 不推荐场景

六、企业级项目结构示例

七、学习路径建议

八、常见误解澄清

8.1 Vue 3 一定要用 Composition API 吗?

8.2 Vue 3 = Composition API?

8.3 必须用 TypeScript 吗?

8.4 Vue 3 难学吗?

九、本章小结

动手练习

推荐阅读