Vue 3移动Web开发与性能调优实战

图书标准信息

• 作者 吕鸣
• 出版社 清华大学出版社
• 出版时间 2023-06
• 版次 1
• ISBN 9787302635802
• 定价 99.00元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸

【内容简介】

《Vue3移动Web开发与性能调优实战》旨在向读者介绍如何使用Vue 3和其他现代Web技术创建高性能的移动Web应用程序。《Vue3移动Web开发与性能调优实战》不仅详细介绍有关移动Web和Vue 3的技术知识，包括HTML5、CSS3、Vue全家桶、构建工具Vite、移动Web屏幕适配等，并讲解如何使用这些技术来创建快速、可靠和可扩展的应用程序，还深入探讨各种性能优化技术，并向读者展示如何使用这些技术来提升Web应用程序的性能、可靠性和用户体验。后通过一个企业级实战项目——仿微信朋友圈系统来全方位讲解移动Web和Vue 3在企业级项目中的应用实践。 《Vue3移动Web开发与性能调优实战》既适合有一定前端开发基础的学生、前端开发的从业者以及自由项目开发者，也适合对Vue 3感兴趣的、擅于做各种Vue 3应用探索、想要深入了解Vue 3底层实现的开发者，还可作为高校相关专业的教学用书。

【作者简介】

吕鸣，从业10年，先后供职于深圳勝讯、宇通客车、蚂蚁集团，瑞茂通等，担任Web前端高级工程师和前端架构师。职业生涯对于Web开发、iOS开发、Python开发都有涉猎，尤其对相关实际项目开发和调优工作有丰富经验。出版著作《Vue 3.js应用开发与核心源码解析》。

【目录】

目    录

第1章  移动Web开发概述 1

1.1  移动互联网Web开发技术介绍 1

1.1.1  移动Web是什么 1

1.1.2  Web网页和原生App的区别 1

1.1.3  移动Web开发的特点 2

1.1.4  移动Web App是如何工作的 3

1.2  移动Web与HTML 5、CSS 3和Vue.js的关系 4

1.2.1  移动Web与HTML 5和CSS 3的关系 4

1.2.2  移动Web与Vue.js的关系 5

1.3  浏览器安装和代码环境的准备 5

1.3.1  安装Chrome 5

1.3.2  安装Node.js和http-server 5

1.3.3  选择合适的代码编辑器 7

1.4  小结 8

1.5  练习 8

第2章  HTML 5语义化标签和属性 9

2.1  DOCTYPE声明 9

2.2  标签 10

2.3  标签 11

2.4  标签 12

2.5  标签 12

2.6  标签 13

2.7  语义化标签总结 14

2.8  HTML 5其他新增的标签 15

2.8.1  标签 15

2.8.2  标签 16

2.8.3  标签 16

2.9  HTML 5新增的标签属性 18

2.9.1  的type属性 18

2.9.2  文件上传功能 19

2.9.3  其他新增属性 21

2.9.4  的async和

defer属性 22

2.10  小结 24

2.11  练习 24

第3章  HTML 5音频和视频 25

3.1  标签与音频 25

3.1.1  标签的使用 25

3.1.2  使用JavaScript操作audio对象 26

3.1.3  audio对象的事件 27

3.2  标签与视频 29

3.2.1  标签的使用 29

3.2.2  使用JavaScript操作

video对象 31

3.2.3  video对象的事件 31

3.2.4  videojs视频播放器的使用 33

3.3  小结 36

3.4  练习 36

第4章  HTML 5网页存储 37

4.1  初识Web Storage 37

4.1.1  Web Storage的概念 37

4.1.2  同源策略 38

4.1.3  Web Storage的浏览器兼容性 38

4.2  LocalStorage和SessionStorage 38

4.2.1  LocalStorage的增删改查 39

4.2.2  LocalStorage容量的限制 40

4.3  浏览器存储的其他方案 41

4.3.1  IndexedDB 41

4.3.2  Service Worker 42

4.4  小结 42

4.5  练习 42

第5章  CSS 3选择器 43

5.1  CSS 3属性选择器 43

5.2  CSS 3伪类选择器 44

5.2.1  伪类和伪元素 45

5.2.2  子元素伪类选择器 46

5.2.3  类型子元素伪类选择器 47

5.2.4  条件伪类选择器 48

5.2.5  元素状态伪类选择器 49

5.3  小结 50

5.4  练习 51

第6章  CSS 3转换、过渡与动画 52

6.1  CSS 3转换 52

6.1.1  translate 52

6.1.2  scale 53

6.1.3  rotate 54

6.1.4  skew 55

6.1.5  matrix 56

6.1.6  transform-origin 57

6.1.7  3D转换 59

6.1.8  浏览器前缀 63

6.2  CSS 3过渡 63

6.2.1  transition-property属性 64

6.2.2  transition-duration属性 65

6.2.3  transition-timing-function

属性 65

6.2.4  transition-timing-delay属性 67

6.2.5  过渡效果的特点和局限性 67

6.3  CSS 3动画 67

6.3.1  keyframes 68

6.3.2  animation（动画）属性 69

6.3.3  will-change属性 72

6.4  案例：CSS 3实现旋转3D立方体 73

6.4.1  实现3D立方体 73

6.4.2  旋转3D立方体 75

6.5  小结 77

6.6  练习 77

第7章  移动Web开发和调试 78

7.1  Chrome模拟器调试 78

7.1.1  启用Device Mode功能 78

7.1.2  移动设备视区模式 79

7.1.3  模拟网络状态 80

7.2  spy-debugger调试 82

7.3  小结 85

7.4  练习 85

第8章  移动Web屏幕适配 86

8.1  视区简介 86

8.1.1  物理像素和CSS像素 86

8.1.2  视区 88

8.1.3  设置视区 88

8.2  响应式布局 90

8.2.1  媒体查询 90

8.2.2  案例——响应式页面 94

8.3  Flex布局 98

8.3.1  Flex新旧版本的兼容性 98

8.3.2  Flex容器属性 99

8.3.3  Flex子元素属性 108

8.4  rem适配 114

8.4.1  动态设置根元素的font-size 114

8.4.2  计算rem数值 115

8.5  vw适配 117

8.6  rem适配和vw适配兼容性 118

8.7  小结 119

8.8  练习 120

第9章  移动Web单击事件 121

9.1  touch事件 121

9.1.1  touch事件分类 121

9.1.2  touch事件对象 122

9.2  移动Web端单击事件 124

9.2.1  iOS单击延迟 125

9.2.2  “单击穿透”问题 126

9.3  小结 127

9.4  练习 127

第10章  Vue.js基础 128

10.1  Vue.js实例和组件 128

10.1.1  创建Vue.js实例 128

10.1.2  用component()方法创建组件 129

10.1.3  Vue组件、根组件、实例的区别 130

10.1.4  全局组件和局部组件 131

10.1.5  组件方法和事件的交互操作 132

10.1.6  单文件组件 133

10.2  Vue.js模板语法 136

10.2.1  插值表达式 136

10.2.2  指令 138

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

10.3.1  data属性 147

10.3.2  方法 148

10.3.3  计算属性 149

10.3.4  计算属性和方法 150

10.3.5  监听器 153

10.3.6  监听器和计算属性 155

10.4  案例：Vue 3留言板 157

10.4.1  功能描述 157

10.4.2  案例完整代码 157

10.5  小结 157

10.6  练习 157

第11章  Vue.js组件 158

11.1  组件生命周期 158

11.1.1  beforeCreate和created方法 160

11.1.2  beforeMount和mounted方法 161

11.1.3  beforeUpdate和updated方法 162

11.1.4  beforeUnmount和unmounted方法 164

11.1.5  errorCaptured 166

11.1.6  activated和deactivated 166

11.1.7  renderTracked和renderTriggered 167

11.2  组件通信 167

11.2.1  组件通信概述 167

11.2.2  父组件向子组件通信 169

11.2.3  子组件向父组件通信 172

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

11.2.5  非父子关系组件的通信 176

11.2.6  provide/inject 179

11.3  组件插槽 181

11.3.1  默认插槽 181

11.3.2  具名插槽 182

11.3.3  动态插槽名 183

11.3.4  插槽后备 184

11.3.5  作用域插槽 185

11.3.6  解构插槽props 186

11.4  动态组件 187

11.5  异步组件和 189

11.6  组件 191

11.7  Mixin对象 192

11.7.1  Mixin合并 193

11.7.2  全局Mixin 195

11.7.3  Mixin的取舍 196

11.8  案例：Vue 3待办事项 196

11.8.1  功能描述 196

11.8.2  案例完整代码 197

11.9  小结 200

11.10  练习 200

第12章  Vue.js组合式API 201

12.1  组合式API基础 201

12.2  setup方法 202

12.2.1  setup方法的参数 203

12.2.2  setup方法结合模板使用 204

12.2.3  setup方法的执行时机和getCurrentInstance方法 205

12.3  响应式类方法 205

12.3.1  ref和reactive 205

12.3.2  toRef和toRefs 207

12.3.3  其他响应式类方法 209

12.4  监听类方法 211

12.4.1  computed方法 211

12.4.2  watchEffect方法 212

12.4.3  watch方法 213

12.5  生命周期类方法 215

12.6  methods方法 216

12.7  provide/inject 217

12.8  单文件组件 219

12.9  案例：组合式API待办事项 222

12.9.1  功能描述 222

12.9.2  案例完整代码 222

12.10  小结 224

12.11  练习 224

第13章  Vue.js动画 225

13.1  从一个简单的动画开始 225

13.2  组件实现过渡效果 227

13.3  组件实现动画效果 229

13.4  组件同时实现过渡和动画 230

13.5  组件的钩子函数 232

13.6  多个元素或组件的过渡/动画效果 233

13.7  列表数据的过渡效果 235

13.8  案例：魔幻的事项列表 237

13.8.1  功能描述 237

13.8.2  案例完整代码 237

13.9  小结 238

13.10  练习 239

第14章  Vuex状态管理 240

14.1  什么是状态管理模式 240

14.2  Vuex概述 241

14.2.1  Vuex的组成 241

14.2.2  安装Vuex 242

14.2.3  一个简单的store 243

14.3  state 244

14.4  getters 245

14.5  mutation 247

14.6  action 249

14.7  module 251

14.8  Vuex插件 255

14.9  在组合式API中使用Vuex 256

14.10  Vuex适用的场合 258

14.11  另一种状态及管理方案——Pinia 258

14.12  案例：事项列表的数据通信 259

14.12.1  功能描述 259

14.12.2  案例完整代码 259

14.13  小结 261

14.14  练习 261

第15章  Vue Router路由管理 262

15.1  什么是单页应用 262

15.2  Vue Router概述 263

15.2.1  安装Vue Router 263

15.2.2  一个简单的组件路由 263

15.3  动态路由 265

15.3.1  动态路由匹配 265

15.3.2  响应路由变化 266

15.4  导航守卫 267

15.4.1  全局前置守卫 267

15.4.2  全局解析守卫 268

15.4.3  全局后置钩子 269

15.4.4  组件内的守卫 269

15.4.5  路由配置守卫 270

15.5  嵌套路由 271

15.6  命名视图 273

15.7  命名路由 275

15.8  编程式导航 275

15.9  路由组件传参 278

15.10  路由重定向、别名及元数据 279

15.10.1  路由重定向 279

15.10.2  路由别名 280

15.10.3  路由元数据 281

15.11  Vue Router的路由模式 282

15.12  滚动行为 283

15.13  keep-alive 284

15.13.1  keep-alive缓存状态 284

15.13.2  利用元数据meta控制keep-alive 285

15.14  路由懒加载 288

15.15  在组合式API中使用Vue Router 288

15.16  案例：Vue Router路由待办事项 290

15.16.1  功能描述 290

15.16.2  案例完整代码 290

15.17  小结 291

15.18  练习 291

第16章  新一代开发构建工具Vite 292

16.1  Vite概述 292

16.1.1  开发环境和生产环境 292

16.1.2  Rollup 294

16.2  Vite的安装和使用 294

16.2.1  初始化项目 294

16.2.2  启动项目 295

16.2.3  热更新 296

16.3  Vite自定义配置 296

16.3.1  静态资源处理 297

16.3.2  插件配置 298

16.3.3  服务端渲染配置 299

16.4  小结 299

16.5  练习 299

第17章  移动Web性能优化 300

17.1  资源合并与压缩优化 300

17.1.1  HTML文件压缩 300

17.1.2  JavaScript和CSS文件压缩 301

17.1.3  图片文件压缩 301

17.1.4  资源合并 302

17.1.5  Gzip压缩 302

17.1.6  升级HTTP 2.0 302

17.1.7  图片base64和Icon Font 304

17.2  浏览器加载原理优化 305

17.3  缓存优化 305

17.3.1  强缓存：Expires&Cache-Control 306

17.3.2  协商缓存：

Last-Modified&Etag 307

17.3.3  妙用LocalStorage 307

17.3.4  离线包机制 308

17.3.5  服务端渲染 309

17.4  懒加载与预加载 310

17.4.1  首屏资源加载优化 310

17.4.2  预加载 311

17.5  渲染优化 312

17.5.1  16ms优化 312

17.5.2  重绘和重排 313

17.5.3  requestAnimationFrame和requestIdleCallback 313

17.5.4  长列表滚动优化 314

17.5.5  合理使用GPU 314

17.6  小结 315

17.7  练习 315

第18章  实战项目：微信朋友圈系统的开发 316

18.1  开发环境准备 316

18.1.1  安装代码编辑器

Sublime Text 3 316

18.1.2  安装CNPM 317

18.1.3  Vite项目初始化 317

18.2  项目功能逻辑 319

18.3  登录页面的开发 319

18.3.1  引入WeUI 320

18.3.2  登录页面的组件 320

18.3.3  用户信息设置在Vuex中 322

18.3.4  设置用户token 323

18.4  发表页面的开发 324

18.5  首页的开发 326

18.5.1  导航栏 327

18.5.2  顶部模块 328

18.5.3  列表组件 328

18.5.4  单条内容组件 330

18.5.5  图片查看器组件 335

18.6  个人页面的开发 335

18.6.1  “我的”页面 335

18.6.2  用户详情页面 337

18.7  路由配置 338

18.8  页面转场动画 339

18.8.1  转场动画概述 339

18.8.2  监听router 339

18.8.3  使用和Animate.css实现页面切换动画 340

18.9  项目小结 342