目 录
第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