前言

自互联网行业出现以来,Web 前端就在不断发展变化着,从开始的静态页面,到 JavaScript 脚本添加页面交互,再到 Ajax 出现使页面内容变得更加丰富,然后就是 HTML 5CSS 3 让前端不仅限于浏览器,也走进了人们的手机中。每一步变化都影响着前端开发者的日常工作,10 年前的深夜,当我们还在为 jQuery 众多烦琐的 API 而头疼,不知该如何拆分和组织众多 JSCSS 文件时,是否会想到有了 Vue.jsReact.jsAngular.js 以及 WebpackVite 工具,让我们真正地进入了前端工程化的时代。前端的发展变化不仅是继承式地迭代,同时也是不断的变革和创造。

Vue.js 是一套用于构建用户界面的渐进式框架,也是一款 Web 应用框架,可创建复杂的单页应用。它由尤雨溪(Evan You)创建,目前由他和其他活跃的核心团队成员维护。Vue.js 关注的核心是 MVC 模式中的视图层,同时它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。Vue.js 不仅容易上手,还便于与第三方库集成和整合,生态非常丰富,是当今最受欢迎的开源 JavaScript 项目之一。本书主要围绕 Vue.js 来讲解其基础理论知识和应用实践项目。

本书介绍

本书基于 Vue.js 3.2.28 版本,是当前 Vue 3.x 最稳定的版本,我们通常把 Vue.js 3 的一些版本(例如 3.2.4、3.0 等)统称为 Vue 3.x 版本,而 Vue.js 2 的一些版本统称为 Vue 2.x 版本。相较于 Vue 2.x 版本来说,Vue 3.x 在源码实现上有了一定程度上的改变,并且在性能和可用性上有了很大的提升,其中主要包括:

  • 重构虚拟 DOM 模块(静态提升)。

  • 基于 Proxy 的响应式对象。

  • 事件缓存。

  • 更好的 Tree Shaking 支持。

  • TypeScriptMonorepo 代码组织。

  • 组合式 API

  • Vite 工具。

本书在讲解 Vue 3 基础内容的基础上也会围绕这些新的变化和特性进行讲解和应用,同时详细介绍了 Vue.js 相关的生态,包括 VuexVue RouterVue CliVue 动画、ViteVue Cli 工具等。另外本书还涉及 Vue 服务端渲染(Node.jsExpress)的相关内容,服务端渲染对 Vue 前端项目的改造提升是非常明显的,不仅有利于搜索引擎的 SEO,在首屏体验上也会快很多,但是需要前端开发者关注的点也更多了,这可能需要读者有一定的 Node.js 基础,以便于对这部分内容的理解。本书的一大特色是对 Vue 3.x 的核心源码(响应式原理、双向绑定实现、虚拟 DOM<keep-alive> 原理和实现)进行了分析和讲解,这不仅有利于读者掌握 Vue.js 的设计思想,也能提升读者对 Vue.js 框架的熟练度,同时 Vue.js 源码知识也是近年来前端面试经常被问到的内容,学习和掌握这些内容是非常必要的。在本书的最后会应用所讲解的 Vue.js 相关内容来开发一个实战项目,以帮助读者完整地体验从 0 到 1 的开发过程,还包括 Vite 工具的构建配置和模拟请求后端数据等只会在真实项目中才会用的技能。

本书的所有内容旨在帮助读者真正掌握 Vue.js 的应用开发,同时兼顾了 Node.js 的服务端渲染知识以及核心的源码分析内容,让读者学会 Vue.js 项目开发的同时还能兼具掌握其内部的实现机制,最终得到全方位的提升。