Vue.js 3 應用開發與核心源碼解析

目    錄

 

第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