【Vue3 第一章】Vue 簡介
## 前置導讀
### 1. 學習 Vue3 需要什么知識？
- 需要有 HTML5 + CSS3 + JavaScript 基礎(chǔ)
- 對 Node 的包管理器有一定的了解（比如：通過 npm 的方式安裝過 Bootstrap、less 等插件）
- 了解過 Vue2 或者 React 等框架（當然，如果沒有了解過問題也不大）
點擊?Vue2全家桶?視頻觀看
- 學習 Vue3 一定需要學習 TypeScript 嗎？
? 不一定，如果有了解，自然會更好。本課程，暫定原生 JavaScript 語言，根據(jù)課程實際進度是否安排 TS 課程。
### 2. 通過本課程將能學到什么？
- Vite 構(gòu)建工具
- Vue3 最新的 setup 語法糖
- VueRouter 路由管理
- Pinia 狀態(tài)管理
- Axios 基于 promise 的 HTTP 庫
- ElementPlus 一個 Vue3 的 UI 框架
- NodeJS + Express 構(gòu)建后臺服務(wù)（選講）
- 實戰(zhàn)應用（PC、移動端、桌面應用，選講）
## 第一章：Vue 簡介
Vue (發(fā)音為 /vju?/，類似 **view**) 是一款用于構(gòu)建用戶界面的漸進式 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。
Vue 采用自底向上增量開發(fā)的設(shè)計。核心庫只關(guān)注**視圖層**，它不僅易于上手，還便于與第三方庫或既有項目整合。
### 1.1 核心關(guān)鍵詞：構(gòu)建用戶界面
前端開發(fā)人員最主要的工作，就是為網(wǎng)站的用戶構(gòu)建出美觀、舒適、好用的網(wǎng)頁。
在大多數(shù)啟用了構(gòu)建工具的 Vue 項目中，我們可以使用一種類似 HTML 格式的文件來書寫 Vue 組件，它被稱為**單文件組件** (也被稱為 `*.vue` 文件，英文 Single-File Components，縮寫為 **SFC**)。顧名思義，Vue 的單文件組件會將一個組件的邏輯 (JavaScript)，模板 (HTML) 和樣式 (CSS) 封裝在同一個文件里。
如你所見，Vue 的單文件組件是網(wǎng)頁開發(fā)中 HTML、CSS 和 JavaScript 三種語言經(jīng)典組合的自然延伸。`<template>`、`<script>` 和 `<style>` 三個塊在同一個文件中封裝、組合了組件的視圖、邏輯和樣式。
### 1.2 核心關(guān)鍵詞：框架
#### 1.2.1 庫和框架的區(qū)別
框架與庫之間最本質(zhì)區(qū)別在于控制權(quán)：you call libs, frameworks call you（控制反轉(zhuǎn)）
- **庫**：庫更多的是一個封裝好的特定的集合，提供給開發(fā)者使用，而且是特定于某一方面的集合（方法和函數(shù)），庫沒有控制權(quán)，控制權(quán)在使用者手中，在庫中查詢需要的功能在自己的應用中使用，我們可以從封裝的角度理解庫；
- **框架**：框架顧名思義就是一套架構(gòu)，會基于自身的特點向用戶提供一套相當于叫完整的解決方案，而且控制權(quán)的在框架本身，使用者要找框架所規(guī)定的某種規(guī)范進行開發(fā)。
在實際中，像angular、vue、react就屬于框架，而jQuery、underscore、zepto就是庫，在框架中我們完全可以自由的使用庫，同時也可以在沒有框架的基礎(chǔ)之上使用庫，庫的使用是很自由的，控制權(quán)始終在我們的手中。但是使用框架時候就必須按照它的規(guī)范來進行模塊化的開發(fā)。
#### 1.2.2 Vue 框架
官方給 vue 的定位是前端框架，因為它提供了構(gòu)建用戶界面的一整套解決方案（俗稱vue 全家桶）：
- vue（核心庫）
- vue-router（路由方案）
- pinia（狀態(tài)管理方案）
- Element Plus（快速搭建頁面UI 效果的方案）
以及輔助vue 項目開發(fā)的一系列工具：
- vite（npm 全局包：一鍵生成工程化的vue 項目-小而巧）
- vue-devtools（瀏覽器插件：輔助調(diào)試的工具）
- VSCode Vue3 插件推薦 Vue Language Features (Volar)
### 1.3 核心關(guān)鍵詞：漸進式（自底向上）
**漸進式**：就是一步一步的拓展功能，不是說你必須一次把所有的東西都用上。
**自底向上設(shè)計**：是一種設(shè)計程序的過程和方法，就是先編寫出基礎(chǔ)程序段，然后再逐步擴大規(guī)模、補充和升級某些功能，實際上是一種自底向上構(gòu)造程序的過程。
拿手機舉例：手機最初設(shè)計的基礎(chǔ)功能就是打電話、發(fā)短信，隨著科技和網(wǎng)絡(luò)的進步，手機慢慢的可以用來上網(wǎng)、拍照、拍視頻、安裝各種應用程序（購物、聊天、游戲等app），這就是漸進式，慢慢的去增加功能。
到了 Vue 中，保證核心功能的基礎(chǔ)上，增加路由、狀態(tài)管理、UI框架等等生態(tài)系統(tǒng)拓展 Vue 基礎(chǔ)的功能，以適應指定業(yè)務(wù)場景的需求。
### 1.4 核心關(guān)鍵字：聲明式
Vue 的兩個核心功能：聲明式渲染 和 響應性
- **聲明式渲染**：Vue 基于標準 HTML 拓展了一套模板語法，使得我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀態(tài)之間的關(guān)系。
- **響應性**：Vue 會自動跟蹤 JavaScript 狀態(tài)并在其發(fā)生變化時響應式地更新 DOM。
拓展：聲明式編程與命令式編程
- **命令式編程**（Imperative）：詳細的命令機器怎么（How）去處理一件事情以達到你想要的結(jié)果（What）。舉例前面學習JS完成案例的過程中，每完成一個操作，都需要通過JavaScript編寫一條代碼，來給瀏覽器一個指令；每一步的指令都是按順序執(zhí)行的，稱為命令式編程
- **聲明式編程**（ Declarative）：只告訴你想要的結(jié)果（What），機器自己摸索過程（How）。Vue 開發(fā)過程中，我們會在createApp傳入的對象中聲明需要的內(nèi)容，模板template、數(shù)據(jù)data、方法methods；稱為是聲明式編程；
? 聲明式編程對程序開發(fā)人員更加友好，讓其把工作重心放在核心業(yè)務(wù)實現(xiàn)上。
### 1.5 核心關(guān)鍵字：組件化
組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構(gòu)建大型應用。幾乎任意類型的應用界面都可以抽象為一個組件樹。
正是因為有了組件化的思想，前端的跨平臺得到了實現(xiàn)。所謂組件，就是對象，每一個組件都是一個 js 對象，每一個 js 對象都可以編譯成 html、Android、iOS 或者桌面端上的元素。
**組件可以進行封裝，實現(xiàn)代碼復用。**
界面根據(jù)Dom結(jié)構(gòu)進行拆分，形成樹狀結(jié)構(gòu)有如下優(yōu)點：
- **良好的復用性**：我需要哪個組件，就把哪個組件（對應圖中的每一個立方體）單拎出來用，因為組件之間是獨立的。
- **高效，便于比對**：哪些數(shù)據(jù)數(shù)據(jù)變了可以立刻做出響應。界面中修改數(shù)據(jù)時，不需要層層尋找，找到對應的Dom元素再進行修改，我們可以根據(jù)組件的編號，找到相對應的組件進行數(shù)據(jù)的修改。
### 1.6 MVVM 模式
#### 1.6.1 概述
MVVM 是一種數(shù)據(jù)驅(qū)動模式。即將數(shù)據(jù)和視圖雙向綁定，我們既可以通過修改視圖來修改數(shù)據(jù)，也可以通過修改數(shù)據(jù)來修改視圖。
Vue 使用MVVM響應式編程模型，避免直接操作DOM , 降低DOM操作的復雜性。
在MVVM（Model-View-ViewModel） 架構(gòu)中，它把每個HTML 頁面都拆分成了如下三個部分：
- **View**：視圖層（UI 用戶界面）
- **Model**：數(shù)據(jù)層（存儲數(shù)據(jù)及對數(shù)據(jù)的處理如增刪改查）
- **ViewModel**：業(yè)務(wù)邏輯層（一切 js 可視為業(yè)務(wù)邏輯），MVVM核心
#### 1.6.2 工作原理
ViewModel 作為MVVM 的核心，是它把當前頁面的數(shù)據(jù)源（Model）和頁面的結(jié)構(gòu)（View）連接在了一起。
當數(shù)據(jù)源發(fā)生變化時，會被ViewModel 監(jiān)聽到，VM 會根據(jù)最新的數(shù)據(jù)源自動更新頁面的結(jié)構(gòu)
當表單元素的值發(fā)生變化時，也會被VM 監(jiān)聽到，VM 會把變化過后最新的值自動同步到Model 數(shù)據(jù)源中
#### 1.6.3 優(yōu)點
- 低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
- 獨立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計。
- 可測試。界面素來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來寫。
### 1.7 Vue 開發(fā)采用虛擬 DOM
用傳統(tǒng)的開發(fā)模式，原生JS或JQ操作DOM時，瀏覽器會從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程。在一次操作中，我需要更新10個DOM節(jié)點，瀏覽器收到第一個DOM請求后并不知道還有9次更新操作，因此會馬上執(zhí)行流程，最終執(zhí)行10次。例如，第一次計算完，緊接著下一個DOM更新請求，這個節(jié)點的坐標值就變了，前一次計算為無用功。計算DOM節(jié)點坐標值等都是白白浪費的性能。即使計算機硬件一直在迭代更新，操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現(xiàn)頁面卡頓，影響用戶體驗。
Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來構(gòu)建，當其中一部分發(fā)生變化時，其實就是對應某個DOM節(jié)點發(fā)生了變化，虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計出來的。如前，若一次操作中有10次更新DOM的動作，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內(nèi)容保存到本地一個JS對象中，最終將這個JS對象一次性attch到DOM樹上，再進行后續(xù)操作，避免大量無謂的計算量。所以，用JS對象模擬DOM節(jié)點的好處：頁面的更新可以先全部反映在JS對象(虛擬DOM)上，操作內(nèi)存中的JS對象的速度顯然要更快，等更新完成后，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪制，從而提高性能。
### 1.8 Vue3 對比 Vue2
如下圖，傳統(tǒng)的 vue2 邏輯比較分散 可讀性差 可維護性差。對比 vue3 則邏輯分明可維護性高。
Vue1.x 與 Vue2.x 的 Options APl（選項式API）的設(shè)計是按照 methods、computed、data、 props這些不同的選項分類，當組件小的時候，這種分類方式一目然;但是在大型組件中，一個組件可能有多個邏輯關(guān)注點，當使用Options APl的時候，每一個關(guān)注點都有自己的Options，如果需要修改一個邏輯點關(guān)注點，就需要在單個文件中不斷上下切換和尋找。
Vue3.x 的 Composition API（組合式API），它有一個很好的機制去解決這樣的問題，就是將某個邏輯關(guān)注點相關(guān)的代碼全都放在一個函數(shù)里。
### 1.9 Vue3 新特性
#### 1.9.1 重寫雙向數(shù)據(jù)綁定
**Vue2 基于Object.defineProperty() 實現(xiàn)**。
把 Vue 中的核心方法 defineReactive 做一些簡化如下：
> Vue通過defineReactive方法實現(xiàn)對需要觀察的對象的每個屬性進行監(jiān)控。dep對象就相當于一個調(diào)度中心的作用，如果有數(shù)據(jù)用到這個屬性，它就會自動收集該屬性到調(diào)度中心，如果某屬性發(fā)生了改變，那就會通知調(diào)度中心來更新視圖。
**Vue3 基于Proxy 實現(xiàn)**
> Proxy 與 Object.defineProperty(obj, prop, desc)方式相比有以下優(yōu)勢：
> - 丟掉麻煩的備份數(shù)據(jù)
> - 省去for in 循環(huán)
> - 可以監(jiān)聽數(shù)組變化
> - 代碼更簡化
> - 可以監(jiān)聽動態(tài)新增的屬性
> - 可以監(jiān)聽刪除的屬性
> - 可以監(jiān)聽數(shù)組的索引和 length 屬性
#### 1.9.2 優(yōu)化 虛擬DOM
**在Vue2中,每次更新diff,都是全量對比,Vue3則只對比帶有標記的,這樣大大減少了非動態(tài)內(nèi)容的對比消耗**
[Vue Template Explorer](https://vue-next-template-explorer.netlify.app/) 我們可以通過這個網(wǎng)站看到靜態(tài)標記
**patch flag 優(yōu)化靜態(tài)樹**
`Vue3` 編譯后的 `Vdom` 是這個樣子的
新增了 patch flag 標記
我們發(fā)現(xiàn)創(chuàng)建動態(tài) dom 元素的時候，Vdom 除了模擬出來了它的基本信息之外，還給它加了一個標記： 1 /* TEXT */，這個標記就叫做 patch flag（補丁標記）。patch flag 的強大之處在于，當你的 diff 算法走到 _createBlock 函數(shù)的時候，會忽略所有的靜態(tài)節(jié)點，只對有標記的動態(tài)節(jié)點進行對比，而且在多層的嵌套下依然有效。盡管 JavaScript 做 Vdom 的對比已經(jīng)非常的快，但是 patch flag 的出現(xiàn)還是讓 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在針對大組件的時候。
#### 1.9.3 Fragments
vue3 允許我們支持多個根節(jié)點
同時支持render JSX 寫法
同時新增了Suspense teleport 和 多 v-model 用法
#### 1.9.4 Tree shaking
簡單來講，就是在保持代碼運行結(jié)果不變的前提下，去除無用的代碼。
在Vue2中，無論我們使用什么功能，它們最終都會出現(xiàn)在生產(chǎn)代碼中。主要原因是Vue實例在項目中是單例的，捆綁程序無法檢測到該對象的哪些屬性在代碼中被使用到。而 Vue3源碼引入tree shaking特性，將全局 API 進行分塊。如果你不使用其某些功能，它們將不會包含在你的基礎(chǔ)包中。就是比如你要用watch 就是import {watch} from 'vue' 其他的computed 沒用到就不會給你打包減少體積
#### 1.9.5 Composition API
Vue3 組合式 API，提供了 Setup 語法糖式編程。例如 ref reactive watch computed toRefs 等相關(guān)知識是我們接下來要講的重點知識。
### 1.10 vue-devtools 調(diào)試工具
vue 官方提供的vue-devtools調(diào)試工具，能夠方便開發(fā)者對vue 項目進行調(diào)試與開發(fā)。Chrome 瀏覽器在線安裝vue-devtools?
- vue 2.x 調(diào)試工具
? https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
- vue 3.x 調(diào)試工具
? https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
> 注意：vue2 和vue3 的瀏覽器調(diào)試工具不能交叉使用！
點擊Chrome 瀏覽器右上角的 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-clRSTwtM-1672016260783)(Vue3課程筆記導讀.assets/image-20221225220407446.png)] 按鈕，選擇更多工具-> 擴展程序-> Vue.js devtools 詳細信息，并勾選如下的兩個選項：
> 注意：修改完配置項，須重啟瀏覽器才能生效！
在瀏覽器中訪問一個使用了vue 的頁面，打開瀏覽器的開發(fā)者工具，切換到Vue 面板，即可使用vue-devtools調(diào)試當前的頁面。
?? 看完兩件事
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我兩個小忙：
點個「贊」或者「轉(zhuǎn)發(fā)評論」，讓更多的人也能看到這篇內(nèi)容（喜歡不點贊，都是耍流氓 -_-）
關(guān)注公眾號「前端知識分享喵」，不定時更新前端技術(shù)分享，
公眾號后臺回復「電子書」即可免費獲取精選的前端電子書。
添加 MagnumHou 微信，可以獲取 up 主有的大機構(gòu)的學習視頻哦
