本书以前端工程化和企业级应用开发为目标，围绕Vue 3及相关生态技术与核心源码进行详细剖析。内容包括：Vue.js核心基础；相关生态，包括状态管理框架Vuex、路由管理框架Vue Router、Vue动画技术、Vue网络与数据存储技术，前端构建工具Vite与Vue Cli；进阶的Vue服务端渲染，包括Node.js、Express和Nuxt.js；核心源码剖析，包括响应式原理、双向绑定实现、虚拟DOM、keep-alive原理和实现，旨在使读者掌握Vue的设计思想，提升开发项目和应对面试的能力；每章提供一个小项目，最后还提供了一个以工程化思想开发的实战项目，使读者能够真正掌握从0到1开发一个企业级应用的全过程。

本书内容丰富，技术先进，注重实践，适合有一定前端开发基础的学生、从业者，以及自由项目开发者阅读，也适合对Vue.js感兴趣，善于做各种Vue.js应用探索，想要深入了解Vue.js底层实现的开发者阅读，还可以用作大专院校及培训机构的教学用书。

前    言

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

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支持。

? TypeScript和Monorepo代码组织。

? 组合式API。

? Vite工具。

本书在讲解Vue 3基础内容的基础上也会围绕这些新的变化和特性进行讲解和应用，同时详细介绍了Vue.js相关的生态，包括Vuex、Vue Router、Vue Cli、Vue动画、Vite、Vue Cli工具等。另外本书还涉及Vue服务端渲染（Node.js、Express）的相关内容，服务端渲染对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项目开发的同时还能兼具掌握其内部的实现机制，最终得到全方位的提升。

配书资源

为方便读者上机演练，本书提供了全部案例的源代码，读者可以扫描右侧的二维码下载，也可按提示把链接转发到自己的邮箱中下载。如果有疑问，请发送邮件至booksaga@126.com，邮件主题为“Vue.js 3应用开发与核心源码解析”。

全书还提供了各章案例与项目的教学视频，读者直接扫描书中的二维码即可观看学习。

读者对象

本书适合有一定前端开发基础的学生、从业者以及自由项目开发者阅读。

本书也适合对Vue.js感兴趣，善于做各种Vue.js应用探索，想要深入了解Vue.js底层实现的开发者阅读。

还可用作大中院校的教学用书，或有面试需求的前端求职人员的参考用书。

本书的默认环境和依赖说明

本书所包含的源码和项目开发调试环境为Windows 11操作系统，编辑器为Sublime Text 3，调试用的浏览器为Chrome，版本是98，在一些案例中会使用到Node.js，版本为v-14.14.0，建议读者提前进行配置和安装。

限于编者水平，书中错误在所难免，敬请广大读者和业界同行批评指正。

编  者  

2022年4月

目    录

第1章  Vue.js概述 1

1.1  认识MVC和MVVM模式 1

1.1.1  传统的MVC模式 1

1.1.2  流行的MVVM模式 2

1.2  Vue.js简介 2

1.2.1  Vue.js的由来 2

1.2.2  Vue.js、前端工程化和Webpack 3

1.3  Vue.js的安装和导入 4

1.3.1  通过<script>标签导入 4

1.3.2  通过npm导入 4

1.3.3  通过Vue Cli和Vite导入 4

1.4  Vue 3新特性概览 5

1.4.1  更快、更小、更易于维护 5

1.4.2  新特性初体验 9

1.5  ES 6语言基础 12

1.5.1  变量声明 12

1.5.2  模块化 15

1.5.3  Promise和async/await 17

1.6  案例：Hello Vue 3 20

1.7  小结与练习 21

第2章  Vue.js基础 22

2.1  Vue.js实例和组件 22

2.1.1  创建Vue.js实例 22

2.1.2  用component()方法创建组件 24

2.1.3  Vue组件、根组件、实例的区别 25

2.1.4  全局组件和局部组件 25

2.1.5  组件方法和事件的交互操作 26

2.1.6  单文件组件 28

2.2  Vue.js模板语法 30

2.2.1  插值表达式 31

2.2.2  指令 33

2.3  Vue.js的data属性、方法、计算属性和监听器 44

2.3.1  data属性 44

2.3.2  方法 45

2.3.3  计算属性 46

2.3.4  计算属性和方法 47

2.3.5  监听器 51

2.3.6  监听器和计算属性 54

2.4  案例：Vue 3留言板 55

2.4.1  功能描述 56

2.4.2  案例完整代码 56

2.5  小结与练习 56

第3章  Vue.js组件 57

3.1  组件生命周期 57

3.1.1  beforeCreate和created 59

3.1.2  beforeMount和mounted 60

3.1.3  beforeUpdate和updated 61

3.1.4  beforeUnmount和unmounted 64

3.1.5  errorCaptured 65

3.1.6  activated和deactivated 66

3.1.7  renderTracked和renderTriggered 66

3.2  组件通信 67

3.2.1  组件通信概述 67

3.2.2  父组件向子组件通信 70

3.2.3  子组件向父组件通信 74

3.2.4  父子组件的双向数据绑定与自定义v-model 76

3.2.5  非父子关系组件的通信 77

3.2.6  provide / inject 81

3.3  组件插槽 84

3.3.1  默认插槽 84

3.3.2  具名插槽 85

3.3.3  动态插槽名 87

3.3.4  插槽后备 87

3.3.5  作用域插槽 88

3.3.6  解构插槽props 90

3.4  动态组件 91

3.5  异步组件和<suspense> 93

3.6  <teleport> 95

3.7  Mixin 97

3.7.1  Mixin合并 98

3.7.2  全局Mixin 100

3.7.3  Mixin取舍 101

3.8  案例：Vue 3待办事项 101

3.8.1  功能描述 102

3.8.2  案例完整代码 102

3.9  小结与练习 106

第4章  Vue.js组合式API 107

4.1  组合式API基础 107

4.2  setup方法 109

4.2.1  setup方法的参数 109

4.2.2  setup方法结合模板使用 111

4.2.3  setup方法的执行时机和getCurrentInstance方法 112

4.3  响应式类方法 112

4.3.1  ref和reactive 112

4.3.2  toRef和toRefs 114

4.3.3  其他响应式类方法 117

4.4  监听类方法 120

4.4.1  computed方法 120

4.4.2  watchEffect方法 121

4.4.3  watch方法 122

4.5  生命周期类方法 124

4.6  methods方法 125

4.7  provide / inject 127

4.8  单文件组件<script setup> 129

4.9  案例：组合式API待办事项 133

4.9.1  功能描述 133

4.9.2  案例完整代码 133

4.10  小结与练习 135

第5章  Vue.js动画 136

5.1  从一个简单的动画开始 136

5.2  transition组件实现过渡效果 138

5.3  transition组件实现动画效果 140

5.4  transition组件同时实现过渡和动画 142

5.5  transition组件的钩子函数 143

5.6  多个元素或组件的过渡/动画效果 145

5.7  列表数据的过渡效果 147

5.8  案例：魔幻的事项列表 149

5.8.1  功能描述 149

5.8.2  案例完整代码 150

5.9  小结与练习 151

第6章  Vuex状态管理 152

6.1  什么是“状态管理模式” 152

6.2  Vuex概述 154

6.2.1  Vuex的组成 154

6.2.2  安装Vuex 155

6.2.3  一个简单的store 155

6.3  state 156

6.4  getters 158

6.5  mutation 160

6.6  action 162

6.7  modules 165

6.8  Vuex插件 170

6.9  在组合式API中使用Vuex 171

6.10  Vuex适用的场合 173

6.11  Pinia介绍 173

6.12  案例：事项列表的数据通信 174

6.12.1  功能描述 175

6.12.2  案例完整代码 175

6.13  小结与练习 177

第7章  Vue Router路由管理 178

7.1  什么是单页应用 178

7.2  Vue Router概述 179

7.2.1  安装Vue Router 179

7.2.2  一个简单的组件路由 180

7.3  动态路由 181

7.3.1  动态路由匹配 181

7.3.2  响应路由变化 183

7.4  导航守卫 184

7.4.1  全局前置守卫 184

7.4.2  全局解析守卫 185

7.4.3  全局后置钩子 186

7.4.4  组件内的守卫 186

7.4.5  路由配置守卫 188

7.5  嵌套路由 189

7.6  命名视图 191

7.7  命名路由 193

7.8  编程式导航 193

7.9  路由组件传参 196

7.10  路由重定向、别名及元信息 198

7.10.1  路由重定向 198

7.10.2  路由别名 199

7.10.3  路由元数据 199

7.11  Vue Router的路由模式 200

7.12  滚动行为 201

7.13  keep-alive 203

7.13.1  keep-alive缓存状态 203

7.13.2  利用元数据meta控制keep-alive 205

7.14  路由懒加载 207

7.15  在组合式API中使用Vue Router 208

7.16  案例：Vue Router路由待办事项 210

7.16.1  功能描述 210

7.16.2  案例完整代码 210

7.17  小结与练习 211

第8章  Vue Cli工具 212

8.1  Vue Cli概述 212

8.2  Vue Cli的安装和使用 213

8.2.1  初始化项目 215

8.2.2  启动项目 216

8.2.3  使用vue ui命令打开图形化界面 218

8.3  Vue Cli自定义配置 219

8.3.1  configureWebpack配置 220

8.3.2  chainWebpack配置 220

8.3.3  其他配置 222

8.4  案例：Vue Cli创建待办事项 224

8.5  小结与练习 224

第9章  Vite工具 225

9.1  Vite概述 225

9.1.1  怎么区分开发环境和生产环境 225

9.1.2  什么是Rollup 227

9.2  Vite的安装和使用 227

9.2.1  初始化项目 227

9.2.2  启动项目 228

9.2.3  热更新 229

9.3  Vite自定义配置 229

9.3.1  静态资源处理 230

9.3.2  插件配置 231

9.3.3  服务端渲染配置 233

9.4  Vite与Vue Cli 233

9.4.1  Vite和Vue Cli的主要区别 233

9.4.2  Vite和Vue Cli哪个性能更好 234

9.4.3  在实际项目中如何选择 235

9.5  案例：Vite创建待办事项 235

9.6  小结与练习 236

第10章  Vue.js服务端渲染 237

10.1  服务端渲染概述 237

10.1.1  客户端渲染 237

10.1.2  服务端渲染 238

10.2  Vue服务端渲染改造 240

10.2.1  同构问题 240

10.2.2  二次渲染 240

10.2.3  基于Vite的服务端渲染概述 241

10.2.4  创建Vite项目 242

10.2.5  改造main.js 242

10.2.6  创建Node.js服务server.js 244

10.2.7  生产模式服务端渲染 246

10.2.8  优化package.json命令完成改造 249

10.3  编写通用的代码 250

10.3.1  服务端的数据响应性 250

10.3.2  组件生命周期钩子 250

10.3.3  访问特定平台的API 251

10.4  预渲染 252

10.5  Nuxt.js介绍 253

10.6  案例：服务端渲染待办事项 254

10.6.1  功能描述 255

10.6.2  案例完整代码 255

10.7  小结与练习 255

第11章  Vue 3核心源码解析 257

11.1  源码结构解析 257

11.1.1  下载并启动Vue 3源码 257

11.1.2  模块 259

11.1.3  构建版本 259

11.2  面试高频响应式原理 260

11.2.1  Proxy API 261

11.2.2  Proxy和响应式对象reactive 264

11.2.3  ref()方法运行原理 264

11.3  大名鼎鼎的虚拟DOM 270

11.3.1  什么是虚拟DOM 270

11.3.2  Vue 3虚拟DOM 271

11.3.3  获取<template>的内容 272

11.3.4  生成AST 272

11.3.5  生成render方法字符串 275

11.3.6  得到最终的VNode对象 278

11.4  双向绑定的前世今生 281

11.4.1  响应式触发 283

11.4.2  生成新的VNode 286

11.4.3  虚拟DOM的diff过程 287

11.4.4  完成真实DOM的修改 300

11.5  <keep-alive>的魔法 302

11.5.1  LRU算法 303

11.5.2  缓存VNode对象 304

11.6  小结与练习 306

第12章  实战项目：豆瓣电影评分系统 307

12.1  开发环境准备 307

12.1.1  安装代码编辑器Sublime Text 3 307

12.1.2  安装cnpm 308

12.1.3  Vite项目初始化 309

12.2  项目功能逻辑 310

12.3  首页开发 311

12.3.1  轮播翻页组件 312

12.3.2  搜索框组件 313

12.4  登录页开发 314

12.5  详情页开发 316

12.5.1  电影基本信息组件 317

12.5.2  电影演员信息组件 318

12.5.3  电影评论信息组件 319

12.6  发表页开发 320

12.7  搜索页开发 322

12.8  路由配置 324

12.9  服务端渲染改造 325

12.9.1  main.js改造 325

12.9.2  entry-client.js和entry-server.js 326

12.9.3  home.vue改造 326

12.9.4  store改造 327

12.9.5  server.js改造 329

12.10  小结 330

本书在讲解Vue 3基础内容的基础上也会围绕这些新的变化和特性进行讲解和应用，同时详细介绍了Vue.js相关的生态，包括Vuex、Vue Router、Vue Cli、Vue动画、Vite、Vue Cli工具等。另外本书还涉及Vue服务端渲染（Node.js、Express）的相关内容，服务端渲染对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项目开发的同时还能兼具掌握其内部的实现机制，最终得到全方位的提升。

吕  鸣，

从业10年，先后供职于深圳勝讯PCG、宇通客车自动驾驶、瑞茂通，担任Web前端高级工程师和前端架构师。职业生涯对于Web开发、iOS开发、Python开发都有涉猎，尤其对相关实际项目开发和调优工作有丰富经验。曾出版《HTML5移动Web+Vue.js应用开发实战》一书。