Vue3 on 编程那些事儿

第1章环境安装与项目创建

Wed, 25 Mar 2026 12:54:00 +0800

第一章环境安装与项目创建

别急着写代码，先把家伙事儿准备好！磨刀不误砍柴工，工欲善其事必先利其器，老祖宗的话不是白说的。

1.1 开发环境准备

1.1.1 Node.js 与 npm/yarn/pnpm 介绍

如果把前端开发比作厨房做菜，那 Node.js 就是那口灶，而包管理器就是你手边那个装满调料的架子——没有它，你连盐都找不着，更别提起锅烧油了。所以在这本书的第一节，我们不聊 Vue，先聊聊 Vue 赖以生存的土壤：Node.js。

第2章初识 Vue 3

Wed, 25 Mar 2026 12:54:00 +0800

第二章初识 Vue 3

学完环境配置，终于可以和 Vue 3 正式见面了！在开始写代码之前，我们先来认识一下 Vue 3 这个"新朋友"——它是谁？它从哪里来？它的独门绝技是什么？读完这一章，你会对 Vue 3 有一个整体的认知，不再是"只会跟着教程敲代码"的小白，而是真正理解 Vue 3 设计哲学的开发者。

第3章 Vue 3 核心语法

Wed, 25 Mar 2026 12:54:00 +0800

第三章 Vue 3 核心语法

Vue 3 的核心语法就是你每天都要用的"家常便饭"。模板插值、条件渲染、列表渲染、事件处理、双向绑定、class 和 style 绑定——这些语法构成了 Vue 开发的基石。学好这一章，你就能写出大部分日常需求的代码了。这一章的内容非常实用，建议打开你的 IDE，跟着例子一个个敲过去，不要只看不练。

第4章响应式基础

Wed, 25 Mar 2026 12:54:00 +0800

第四章响应式基础

Vue 之所以能成为 Vue，最核心的秘密就是"响应式"。当数据变化时，视图自动更新——这看起来像魔法，但其实背后有一套精密的机制。理解响应式，是理解 Vue 本质的起点。本章我们会深入探讨 ref、reactive、computed、watch 这些核心 API，理解 Vue 3 响应式系统的工作原理。

第5章生命周期

Wed, 25 Mar 2026 12:54:00 +0800

第五章生命周期

组件从诞生到销毁，会经历一系列"生命周期"——创建、挂载、更新、销毁，每个阶段 Vue 都提供了对应的钩子函数，让你在合适的时机做合适的事情。理解生命周期，是掌握组件化开发的钥匙。本章会详细介绍每个阶段的钩子函数，以及 KeepAlive、错误捕获等进阶内容。

第6章组件基础与 Props/Emit

Wed, 25 Mar 2026 12:54:00 +0800

第六章组件基础与 Props/Emit

组件是 Vue 的灵魂。没有组件化，Vue 就是一个会双向绑定的模板引擎；有了组件化，Vue 才能构建复杂的应用。本章我们会学习组件的概念、单文件组件的结构、父子组件之间的数据传递（Props 向下传递、Emit 向上通知），以及如何用 v-model 实现双向绑定。这些是 Vue 组件化开发的基础中的基础。

第7章插槽（Slots）

Wed, 25 Mar 2026 12:54:00 +0800

第七章插槽（Slots）

如果说 Props 是给组件"喂数据"，那插槽就是给组件"喂 UI"。插槽是 Vue 最独特的特性之一——它允许你在父组件里定义子组件的部分内容，让组件变得极度灵活和可复用。学完这一章，你会对"组件不仅仅是标签，更是可塑的容器"这句话有全新的理解。

第8章高级组件特性

Wed, 25 Mar 2026 12:54:00 +0800

第八章高级组件特性

学会基础组件只是入门，这一章我们来解决"进阶"的问题。动态组件、组件缓存、异步组件、DOM 瞬移、attribute 继承、递归组件、跨级通信……每一个都是 Vue 组件化开发中的"高级技能"。学完这一章，你对 Vue 组件的理解会上一个台阶。

第9章 setup 与 script setup

Wed, 25 Mar 2026 12:54:00 +0800

第九章 setup 与 script setup

Composition API 是 Vue 3 的核心编程范式，而 setup 函数和 script setup 则是 Composition API 的主战场。这一章我们会深入理解 setup 的执行时机、this 的行为、返回值的作用，以及 script setup 这个编译器语法糖带来的便利。掌握这一章，你才算真正"会用" Vue 3。

第10章响应式 API 进阶

Wed, 25 Mar 2026 12:54:00 +0800

第十章响应式 API 进阶

ref 和 reactive 只是 Vue 响应式系统的"入门 API"。这一章我们来探索更深层的东西——shallowRef、shallowReactive、markRaw、toRaw、readonly、customRef……以及 watch 的各种高级用法、nextTick 的原理。读完这一章，你对 Vue 响应式系统的理解会从"会用"升级到"理解原理"。

第11章组合式函数（Composables）

Wed, 25 Mar 2026 12:54:00 +0800

第十一章组合式函数（Composables）

Composables（组合式函数）是 Vue 3 最重要的代码复用模式。如果说 Props/Emit/Slots 是组件级别的复用，那 Composables 就是"逻辑级别的复用"——把相关的逻辑抽取到独立的函数里，让组件保持简洁和专注。这一章我们会深入学习如何编写 Composables，以及 VueUse 等常用组合式库。

第12章 Vue Router 4

Wed, 25 Mar 2026 12:54:00 +0800

第十二章 Vue Router 4

Vue Router 是 Vue 官方出品的路由管理器，它是构建单页应用（SPA）的核心基础设施。当用户在页面上点击链接或改变 URL 时，Vue Router 负责找出匹配的路由规则，并渲染对应的组件。本章会详细介绍 Vue Router 4 的所有核心功能——从基础的路由配置到高级的导航守卫、懒加载和滚动行为控制。

第13章 Pinia 状态管理

Wed, 25 Mar 2026 12:54:00 +0800

第十三章 Pinia 状态管理

当应用规模变大，组件之间需要共享的数据会越来越多——用户登录信息、全局主题配置、购物车内容、通知列表……这些数据放在组件里会导致层层 props 穿透，放全局变量会失去响应式。Pinia 就是来解决这个问题的。Pinia 是 Vue 官方推荐的新一代状态管理库，它比 Vuex 更简洁、更 TypeScript 友好，是 Vue 3 项目的不二之选。

第14章性能优化

Wed, 25 Mar 2026 12:54:00 +0800

第十四章性能优化

Vue 3 本身已经很快了，但如果你的应用很大或者用户群体在低网速环境下，性能优化仍然至关重要。本章我们会从加载优化、渲染优化、包体积优化、SEO 优化、Core Web Vitals、错误处理六个维度，系统讲解 Vue 3 的性能优化策略。学会这些，你写出来的应用会比别人快上一大截。

第15章样式方案

Wed, 25 Mar 2026 12:54:00 +0800

第十五章样式方案

CSS 是 Vue 应用的门面。好看的样式能让用户愉悦，难看的样式能让人崩溃。本章我们会讲解 Vue 项目中的各种样式解决方案——CSS 预处理器（SCSS/Less/Stylus）、UnoCSS 原子化方案、CSS 变量实现主题切换、暗色模式适配。这些工具组合起来，能让你的样式开发效率提升好几倍。

第16章动画与过渡

Wed, 25 Mar 2026 12:54:00 +0800

第十六章动画与过渡

静态界面是上个世纪的遗产。在这个人人刷短视频的时代，你的Vue应用如果连个过渡动画都没有，用户点个按钮感觉像是在操控一台1985年的微波炉——没有反馈，不知道发生了什么。本章我们来聊聊Vue中的动画系统，让你的界面动起来、滑起来、弹起来！

第17章 TypeScript 与 Vue 3

Wed, 25 Mar 2026 12:54:00 +0800

第十七章 TypeScript 与 Vue 3

JavaScript是动态类型语言，这意味着你可以把字符串赋值给一个数字变量，然后运行到一半才发现问题——然后花三天debug，最后发现是因为少打了个字。TypeScript就是来解决这个"自由"带来的一系列问题。本章我们来看如何在Vue 3项目中优雅地使用TypeScript，让类型错误在编码阶段就被发现，而不是在生产环境中给你"惊喜"。

第18章工程化实践

Wed, 25 Mar 2026 12:54:00 +0800

第十八章工程化实践

你写的代码能跑是一回事，你的项目能被别人维护是另一回事。本章我们来聊聊Vue项目的工程化——从项目配置、代码规范、Git工作流到构建优化。这些东西不会让你的功能更好，但会让你的项目更健康，让你的队友不会在你离职后诅咒你的名字。

第19章网络请求与工具库

Wed, 25 Mar 2026 12:54:00 +0800

第十九章网络请求与工具库

任何一个不算玩具的Vue应用都需要和网络打交道——获取数据、提交表单、上传文件…没有网络请求的应用就像一家没有外卖的餐厅，功能再强也让人觉得少了点什么。本章我们聊聊Vue生态中的网络请求方案和一些实用工具库。

第20章自定义指令

Wed, 25 Mar 2026 12:54:00 +0800

第二十章自定义指令

Vue内置了很多有用的指令（v-if、v-for、v-model…），但总有一些场景需要更直接地操作DOM。自定义指令就是Vue给你的"特权"——让你能够直接操控DOM元素，实现那些内置指令做不到的事情。本章我们来学习如何编写自定义指令，让你的Vue应用拥有"超能力"。

第21章登录与权限控制

Wed, 25 Mar 2026 12:54:00 +0800

第二十一章登录与权限控制

用户登录和权限控制，可能是全栈开发中最让人又爱又恨的部分。爱的是它太重要了，几乎每个应用都需要；恨的是，这里面的门门道道多到能写一本书。JWT、Token、OAuth2、SSO、动态路由、按钮权限……本章用一整章的篇幅，把这些"拦路虎"一个个给你讲明白，让你从此不再谈"权"色变。

第22章表单处理与验证

Wed, 25 Mar 2026 12:54:00 +0800

第二十二章表单处理与验证

表单，是前端开发中最"脏活累活"集中的地方。输入框、下拉框、开关、上传文件……一个个看着简单，真要处理好每个状态、每种验证、每个边界情况，能把人写到头秃。本章把表单相关的"十八般武艺"全部传授给你，从基础控件到高级封装，从手动校验到 VeeValidate 大法，保管你以后面对任何表单都能从容应对。

第23章测试：让代码自己证明自己

Wed, 25 Mar 2026 12:54:00 +0800

第二十三章测试：让代码自己证明自己

写代码不写测试，就像开车不系安全带——大多数时候没事，但一出事就是大事。测试是前端工程化中绕不开的话题。单元测试、集成测试、E2E 测试……这些词你可能听过无数次，但每次想动手写的时候，又不知道从哪儿开始。本章用 Vue 3 + Vitest + Vue Test Utils + Playwright 给你搭建一套完整的测试体系，保证你看完之后能从"完全不会写测试"直接进化到"测试写到手软"。

第24章实战：后台管理系统项目

Wed, 25 Mar 2026 12:54:00 +0800

第二十四章实战：后台管理系统项目

前二十三章我们学了大量知识点，本章终于要"真刀真枪"地做一个完整的项目了。后台管理系统是 Vue 3 最典型的应用场景——登录认证、侧边菜单、表格列表、表单增删改查、分页、搜索、权限控制……这些"标准动作"本章全部覆盖。学完这一章，你将拥有一个可以写进简历的完整后台管理项目。

第25章实战：移动端 H5 项目与 PWA

Wed, 25 Mar 2026 12:54:00 +0800

第二十五章实战：移动端 H5 项目与 PWA

PC 端的 Vue 项目你可能已经玩得很溜了，但移动端完全是另一个世界——屏幕小、触控操作、网络不稳定、性能有限、还需要考虑在各种奇怪尺寸的设备上正常显示。本章教你如何用 Vue 3 开发真正能在手机上跑起来的 H5 应用，包括移动端适配方案、手势操作、移动端性能优化，以及让 H5 应用拥有接近原生体验的 PWA 技术。学完这章，你的 Vue 技能树又解锁了一个新分支。

第26章内容平台实战

Wed, 25 Mar 2026 12:54:00 +0800

第二十六章内容平台实战

你已经学会了 Vue 3 的各种招式，但"学"和"用"之间还隔着一道坎——真实项目的复杂度。本章我们从零开始，手把手带你构建一个完整的内容发布平台。从需求分析、架构设计，到文章管理、评论点赞，再到 SSR 改造，全部安排。读完本章，你将拥有一个可以真正拿出手的作品。

第27章深入响应式原理

Wed, 25 Mar 2026 12:54:00 +0800

第二十七章深入响应式原理

面试官：“能聊聊 Vue 3 的响应式原理吗？”

你：“当然是用 Proxy 实现的！”

面试官：“那具体是怎么实现的？”

第28章虚拟 DOM 原理

Wed, 25 Mar 2026 12:54:00 +0800

第二十八章虚拟 DOM 原理

虚拟 DOM（vDOM）是 Vue 和 React 等现代前端框架的核心概念之一。它是一种用 JavaScript 对象描述真实 DOM 的技术，可以让框架在内存中高效地计算和更新 DOM。有人说虚拟 DOM 慢，真的是这样吗？本章我们就来揭开它的神秘面纱。

第29章 Vue 3 生态系统

Wed, 25 Mar 2026 12:54:00 +0800

第二十九章 Vue 3 生态系统

Vue 3 不仅仅是一个前端框架，它背后还有一个庞大的生态系统。从全栈框架 Nuxt 3 到桌面应用 Electron+Vue，从跨平台开发 uni-app/Taro 到前沿的 Vapor Mode，Vue 的生态越来越丰富。本章我们就来全面了解这些工具，让你在实际项目中选择合适的技术栈。

第30章 Vue 3 应用部署

Wed, 25 Mar 2026 12:54:00 +0800

第三十章 Vue 3 应用部署

代码写完了，接下来最重要的事情就是部署。本章我们将从构建分析开始，讲解如何优化打包体积、配置 Nginx、实现 Docker 容器化、集成监控告警，以及搭建完整的 CI/CD 流程。学完本章，你的应用就能从"本地玩具"变成"生产级服务"。

第31章 Vue 3 源码解读

Wed, 25 Mar 2026 12:54:00 +0800

第三十一章 Vue 3 源码解读

恭喜你走到这里！本章是本教程的最后一章，我们将深入 Vue 3 的源码，从整体架构到核心实现，全面理解 Vue 3 的设计哲学。学习源码不是为了重复造轮子，而是为了更好地理解框架的工作原理，在遇到问题时能够快速定位原因。

附录 A VS Code 插件推荐

Wed, 25 Mar 2026 12:54:00 +0800

附录 A VS Code 插件推荐

VS Code 是 Vue 3 开发的首选编辑器，而插件是 VS Code 的灵魂。这一章我们整理了 Vue 3 开发中必备的、实用的、锦上添花的各类插件，让你的开发效率更上一层楼。

附录 B Chrome DevTools 调试技巧

Wed, 25 Mar 2026 12:54:00 +0800

附录 B Chrome DevTools 调试技巧

Chrome DevTools 是前端开发者的"瑞士军刀"。对于 Vue 开发者来说，它不仅仅是普通的浏览器调试工具——配合 Vue DevTools 插件，DevTools 能成为 Vue 应用的"X光机"。这一章我们系统介绍 Chrome DevTools 的核心面板和调试技巧，让你在调试 Vue 应用时事半功倍。

附录 C 常用命令速查

Wed, 25 Mar 2026 12:54:00 +0800

附录 C 常用命令速查

磨刀不误砍柴工。Vue 3 开发涉及很多工具——Vite、npm/pnpm、Git、Vue Router、Pinia 等。每个工具都有一套自己的命令，靠脑子记肯定记不住。这一章把最常用的命令整理成速查表，方便随时查阅。

附录 D 术语表

Wed, 25 Mar 2026 12:54:00 +0800

附录 D 术语表

Vue 3 的文档、教程和社区讨论里充满了各种专业术语。对于新手来说，这些术语就像一座座小山，爬过一座还有一座。这一章把 Vue 3 相关的核心术语整理成中英对照表，配上简洁的解释，让你从此不再迷茫。

附录 E 学习资源推荐

Wed, 25 Mar 2026 12:54:00 +0800

附录 E 学习资源推荐

学无止境。Vue 3 的世界很大，这本书只是入门。本章整理了 Vue 官方文档、优质书籍、开源项目、社区博客、视频课程等学习资源，助你在 Vue 之路上走得更远。

Vue3 on 编程那些事儿

第1章 环境安装与项目创建

第一章 环境安装与项目创建

1.1 开发环境准备

1.1.1 Node.js 与 npm/yarn/pnpm 介绍

第2章 初识 Vue 3

第二章 初识 Vue 3

第3章 Vue 3 核心语法

第三章 Vue 3 核心语法

第4章 响应式基础

第四章 响应式基础

第5章 生命周期

第五章 生命周期

第6章 组件基础与 Props/Emit

第六章 组件基础与 Props/Emit

第7章 插槽（Slots）

第七章 插槽（Slots）

第8章 高级组件特性

第八章 高级组件特性

第9章 setup 与 script setup

第九章 setup 与 script setup

第10章 响应式 API 进阶

第十章 响应式 API 进阶

第11章 组合式函数（Composables）

第十一章 组合式函数（Composables）

第12章 Vue Router 4

第十二章 Vue Router 4

第13章 Pinia 状态管理

第十三章 Pinia 状态管理

第14章 性能优化

第十四章 性能优化

第15章 样式方案

第十五章 样式方案

第16章 动画与过渡

第十六章 动画与过渡

第17章 TypeScript 与 Vue 3

第十七章 TypeScript 与 Vue 3

第18章 工程化实践

第十八章 工程化实践

第19章 网络请求与工具库

第十九章 网络请求与工具库

第20章 自定义指令

第二十章 自定义指令

第21章 登录与权限控制

第二十一章 登录与权限控制

第22章 表单处理与验证

第二十二章 表单处理与验证

第23章 测试：让代码自己证明自己

第二十三章 测试：让代码自己证明自己

第24章 实战：后台管理系统项目

第二十四章 实战：后台管理系统项目

第25章 实战：移动端 H5 项目与 PWA

第二十五章 实战：移动端 H5 项目与 PWA

第26章 内容平台实战

第二十六章 内容平台实战

第27章 深入响应式原理

第二十七章 深入响应式原理

第28章 虚拟 DOM 原理

第二十八章 虚拟 DOM 原理

第29章 Vue 3 生态系统

第二十九章 Vue 3 生态系统

第30章 Vue 3 应用部署

第三十章 Vue 3 应用部署

第31章 Vue 3 源码解读

第三十一章 Vue 3 源码解读

附录 A VS Code 插件推荐

附录 A VS Code 插件推荐

附录 B Chrome DevTools 调试技巧

附录 B Chrome DevTools 调试技巧

附录 C 常用命令速查

附录 C 常用命令速查

附录 D 术语表

附录 D 术语表

附录 E 学习资源推荐

附录 E 学习资源推荐

第1章环境安装与项目创建

第一章环境安装与项目创建

第2章初识 Vue 3

第二章初识 Vue 3

第4章响应式基础

第四章响应式基础

第5章生命周期

第五章生命周期

第6章组件基础与 Props/Emit

第六章组件基础与 Props/Emit

第7章插槽（Slots）

第七章插槽（Slots）

第8章高级组件特性

第八章高级组件特性

第10章响应式 API 进阶

第十章响应式 API 进阶

第11章组合式函数（Composables）

第十一章组合式函数（Composables）

第14章性能优化

第十四章性能优化

第15章样式方案

第十五章样式方案

第16章动画与过渡

第十六章动画与过渡

第18章工程化实践

第十八章工程化实践

第19章网络请求与工具库

第十九章网络请求与工具库

第20章自定义指令

第二十章自定义指令

第21章登录与权限控制

第二十一章登录与权限控制

第22章表单处理与验证

第二十二章表单处理与验证

第23章测试：让代码自己证明自己

第二十三章测试：让代码自己证明自己

第24章实战：后台管理系统项目

第二十四章实战：后台管理系统项目

第25章实战：移动端 H5 项目与 PWA

第二十五章实战：移动端 H5 项目与 PWA

第26章内容平台实战

第二十六章内容平台实战

第27章深入响应式原理

第二十七章深入响应式原理

第28章虚拟 DOM 原理

第二十八章虚拟 DOM 原理