第1章Web前端技術(shù)簡(jiǎn)介1.1

Web前端發(fā)展歷程1.2

MV*模式1.3

走近Vue.js1.4Vue.js3.0的新變化了解Web前端的發(fā)展歷程了解MV*模式的異同理解Vue.js的相關(guān)知識(shí)掌握Vue.js3.0的新變化引言隨著前端技術(shù)的發(fā)展，網(wǎng)頁依賴于JavaScript技術(shù)的網(wǎng)頁交互能力得到長(zhǎng)足的發(fā)展，JavaScript使網(wǎng)頁的用戶提要更為具象化。網(wǎng)頁動(dòng)態(tài)化的增強(qiáng)必然要求復(fù)雜JavaScript邏輯代碼的支持，成千上萬行的JavaScript代碼連接著HTML和CSS文件，但是傳統(tǒng)的解決方案都不夠靈活和可定制，于是Vue.js框架應(yīng)運(yùn)而生。1.1Web前端發(fā)展歷程靜態(tài)頁面階段JavaScript誕生AJAX開啟Web2.0時(shí)代前端兼容性框架的出現(xiàn)HTML5的出現(xiàn)前端三大主流框架ECMAScript6.0的發(fā)布1.1Web前端發(fā)展歷程在近30年的前端發(fā)展進(jìn)程中，各種前端技術(shù)層出不窮，根據(jù)主流技術(shù)的更迭可將前端發(fā)展進(jìn)程劃分為7個(gè)時(shí)期。1.靜態(tài)頁面階段1990年萬維網(wǎng)(WWW)誕生。1993年4月，Mosaic瀏覽器作為第一款正式的瀏覽器發(fā)布。1994年12月，萬維網(wǎng)聯(lián)盟（W3C）成立，標(biāo)志著萬維網(wǎng)進(jìn)入了標(biāo)準(zhǔn)化發(fā)展的階段。這個(gè)階段的網(wǎng)頁還非常地原始，主要以HTML為主，是純靜態(tài)的只讀網(wǎng)頁，被稱為Web1.0時(shí)代。1.1Web前端發(fā)展歷程2.JavaScript誕生1995年，JavaScript誕生。由于工期太短，JavaScript語言有許多瑕疵。隨著JavaScript的誕生，前端頁面雛形已基本顯現(xiàn)，即以HTML為骨架，CSS為外貌，JavaScript為交互。了Web2.01.1Web前端發(fā)展歷程3.AJAX開啟Web2.0時(shí)代1998年AJAX出現(xiàn)，AJAX技術(shù)使用XMLHttpRequest對(duì)象與服務(wù)器進(jìn)行通信，從而實(shí)現(xiàn)無需刷新整個(gè)頁面即可更新部分頁面內(nèi)容的效果。前端開發(fā)從Web1.0升級(jí)到了Web2.0，從簡(jiǎn)單的靜態(tài)頁面，發(fā)展到了動(dòng)態(tài)網(wǎng)頁階段。了Web2.01.1Web前端發(fā)展歷程4.前端兼容性框架的出現(xiàn)Prototype是一個(gè)JavaScript基礎(chǔ)類庫，Prototype功能實(shí)用且文件容量較小，解決了動(dòng)畫特效與AJAX請(qǐng)求這2大問題。隨著動(dòng)態(tài)交互、數(shù)據(jù)異步請(qǐng)求的需求增多，jQuery應(yīng)運(yùn)而生。2006年，jQuery正式發(fā)布，此時(shí)的jQuery具有當(dāng)時(shí)有諸多競(jìng)爭(zhēng)對(duì)手，如Dojo、Prototype、ExtJS、MooTools等，競(jìng)爭(zhēng)異常激烈。1.1Web前端發(fā)展歷程5.HTML5的出現(xiàn)W3C于2007年采納了HTML5規(guī)范草案，并在2008年1月22日正式發(fā)布。在HTML5規(guī)范的指引下，各個(gè)瀏覽器廠商不斷改進(jìn)瀏覽器，谷歌以JavaScript引擎V8為基礎(chǔ)研發(fā)的Chrome瀏覽器發(fā)展十分迅速。隨著各大瀏覽器紛紛開始支持HTML5，前端能夠?qū)崿F(xiàn)的交互功能也越來越多，相應(yīng)的代碼復(fù)雜度也迅速提高，以前僅用于后端的MV*框架也開始出現(xiàn)在前端領(lǐng)域。1.1Web前端發(fā)展歷程6.前端三大主流框架前端三大主流框架是React、Vue、Angular，以三大框架為核心的前端技術(shù)已經(jīng)形成了一個(gè)成熟的生態(tài)體系。如以Github為代表的代碼管理倉庫；以NPM和Yarn為代表的包管理工具；ES6、Babel和TypeScript構(gòu)成的腳本體系；以HTML5、CSS3和JavaScript為基礎(chǔ)的前端開發(fā)技術(shù)；以React、Vue、Angular為代表的前端框架；以Webpack為代表的打包工具；以Node.js為基礎(chǔ)的Express和KOA后端框架；以ElementPlus、VantUI、AntDesign為主的前端組件庫等。1.1Web前端發(fā)展歷程7.ECMAScript6.0的發(fā)布2015年6月，ECMAScript6.0發(fā)布，這個(gè)版本增加了很多新的語法，更加提升了JavaScript的開發(fā)潛力，在Vue開發(fā)過程中將大量使用ECMAScript6.0語法，掌握ECMAScript6.0語法是至關(guān)重要的。1.2MV*模式MVC模式MVP模式MVVM模式MV*是MVC、MVP和MVVM的總稱，它們?cè)诩?xì)節(jié)上存在差異，但本質(zhì)上都是一種軟件架構(gòu)模式。MVP和MVVM是MVC的變體，它們由MVC演進(jìn)而來，目的是幫助開發(fā)者更有效地組織和管理應(yīng)用程序的代碼結(jié)構(gòu)。通過提高代碼的可維護(hù)性、可擴(kuò)展性和可重用性，這些架構(gòu)模式為開發(fā)者提供了一個(gè)更高效、更靈活的工作流程。1.2MV*模式MV*模式概述MVC（ModelViewController）是軟件工程中的一種軟件架構(gòu)模式，它把軟件系統(tǒng)分為模型（Model，簡(jiǎn)稱M）、視圖（View，簡(jiǎn)稱V）和控制器（Controller，簡(jiǎn)稱C）三個(gè)基本部分。1.MVC模式定義1.2MV*模式1.2.1

MVC模式Model指的是后端傳遞過來的數(shù)據(jù)。View指的是用戶可見的頁面。Controller控制器指的是M和V之間的連接器，用于控制應(yīng)用程序的流程及頁面的業(yè)務(wù)邏輯。它主要負(fù)責(zé)用戶與應(yīng)用之間的響應(yīng)操作，當(dāng)用戶與頁面產(chǎn)生交互的時(shí)候，Controller調(diào)用Model層，完成對(duì)Model的修改，然后Model層再去通知View層更新。2.MVC模式組成部分之間的關(guān)系1.2MV*模式1.2.1

MVC模式3.MVC模式示意圖1.2MV*模式1.2.1

MVC模式MVP（ModelViewPresenter）由MVC模式演變而來，這兩種模式在結(jié)構(gòu)組成上十分相似，均由三部分構(gòu)成。在MVP模式中，模型（Model）提供數(shù)據(jù)、視圖（View）負(fù)責(zé)顯示、表示器（Presenter）負(fù)責(zé)處理業(yè)務(wù)邏輯。1.MVP模式定義1.2MV*模式1.2.2MVP模式與MVC模式不同，MVP模式不再允許Model與View進(jìn)行直接通信，用戶對(duì)View的操作將移交給Presenter。Presenter執(zhí)行業(yè)務(wù)邏輯，修改Model狀態(tài)，并將Model狀態(tài)改變的消息返回給自己。Presenter獲取到Model改變的消息以后，使用View提供的接口更新界面。2.MVP模式工作原理1.2MV*模式1.2.2MVP模式3.MVP模式示意圖1.2MV*模式1.2.2MVP模式MVVM（Model-View-ViewModel）模式由模型（Model，簡(jiǎn)稱M）、視圖（View，簡(jiǎn)稱V）和視圖模型（ViewModel，簡(jiǎn)稱VM）三部分組成，它本質(zhì)上仍是MVC的改進(jìn)版。1.MVVM模式定義1.2MV*模式1.2.3

MVVM模式MVVM模式不允許Model與View進(jìn)行直接通信，而是借助ViewModel搭建Model與View之間的橋梁，實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)效果。很多主流的前端框架都采用MVVM模式，如Angular、Vue等。2.MVVM模式工作原理1.2MV*模式1.2.3

MVVM模式MVVM模式的核心特性是雙向數(shù)據(jù)綁定，當(dāng)用戶操作View時(shí)，ViewModel監(jiān)測(cè)到View修改了數(shù)據(jù)，會(huì)立即通知Model實(shí)現(xiàn)數(shù)據(jù)的同步變更。當(dāng)Model中的數(shù)據(jù)發(fā)生改變時(shí)，ViewModel同樣會(huì)監(jiān)測(cè)到Model的數(shù)據(jù)變化，并立即通知View進(jìn)行視圖更新。MVVM核心思想是關(guān)注Model的變化，使用聲明式的數(shù)據(jù)綁定實(shí)現(xiàn)View的分離。3.MVVM模式的核心思想1.2MV*模式1.2.3

MVVM模式4.MVVM模式示意圖1.2MV*模式1.2.3

MVVM模式1.3走近Vue.jsVue的發(fā)展歷程

Vue的生態(tài)系統(tǒng)漸進(jìn)式框架響應(yīng)式系統(tǒng)前端框架對(duì)比Vue.js是一套用于構(gòu)建用戶界面和單頁應(yīng)用程序（SPA）的漸進(jìn)式JavaScript框架，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，開發(fā)過程中可以創(chuàng)建可重用的UI組件。Vue.js提供了視圖模板引擎、組件系統(tǒng)、客戶端路由和大規(guī)模狀態(tài)管理等組件，開發(fā)者可以根據(jù)需要逐步添加或刪除這些功能組件，進(jìn)而高效地處理數(shù)據(jù)綁定和異步加載。1.3走近Vue.jsVue.js概述2013年12月7日，Vue的0.6.0版在GitHub上發(fā)布。2015年10月26日，正式發(fā)布了1.0.0版本，Vue被越來越多的開發(fā)者所接納。2016年10月1日，正式發(fā)布了2.0.0版本。2017年發(fā)布了多個(gè)Vue版本，該年度發(fā)布的第一個(gè)Vue版本是v2.1.9，該年度發(fā)布的最后一個(gè)版本為v2.5.13。2019年正式發(fā)布Vue的穩(wěn)定版本v2.5.13。2020年9月18日，Vue.js3.0正式發(fā)布，代號(hào)OnePiece。本書將基于新發(fā)布的Vue.js3.0版本進(jìn)行知識(shí)講解。1.3走近Vue.js1.3.1

Vue的發(fā)展歷程Vue擁有一套成熟的生態(tài)系統(tǒng)，包括腳手架工具（VueCLI）、路由管理工具（Router）、狀態(tài)管理（Vuex）、Axios數(shù)據(jù)請(qǐng)求、UI組件庫、Vue調(diào)試工具（devtools）、ESLint代碼規(guī)范、Webpack打包工具等。其中，Vue常用的UI組件庫包括Element-UI、Element-Plus、Vant-UI等。1.3走近Vue.js1.3.2Vue的生態(tài)系統(tǒng)Vue的生態(tài)系統(tǒng)結(jié)構(gòu)圖如下圖所示。1.3走近Vue.js1.3.2Vue的生態(tài)系統(tǒng)1.Vue.js的漸進(jìn)式結(jié)構(gòu)“漸進(jìn)式”就是將框架進(jìn)行分層規(guī)劃，框架的每層功能都是獨(dú)立可自選的，不同層可被替換為開發(fā)者所熟悉的其他方案。Vue漸進(jìn)式框架分層結(jié)構(gòu)如下圖所示。1.3走近Vue.js1.3.3

漸進(jìn)式框架2.Vue.js的主張每個(gè)Web框架均不可避免的會(huì)有自己的一些特點(diǎn)，并對(duì)使用者提出一定的使用要求，這些要求即為主張，主張有強(qiáng)有弱，其強(qiáng)勢(shì)程度會(huì)影響框架在業(yè)務(wù)開發(fā)中的使用效能。而Vue是弱主張的，這使得開發(fā)者在項(xiàng)目開發(fā)中可以只關(guān)注項(xiàng)目所需的功能特性，暫時(shí)忽略項(xiàng)目中不需要的功能，Vue并不強(qiáng)求讀者一次性掌握其所有的功能特性。1.3走近Vue.js1.3.3

漸進(jìn)式框架3.Vue.js的響應(yīng)式區(qū)別Vue的MVVM模式實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定，為Vue構(gòu)建了一套響應(yīng)式系統(tǒng)。響應(yīng)式系統(tǒng)可在數(shù)據(jù)變化時(shí)自動(dòng)渲染視圖，需要注意的是，Vue2與Vue3的響應(yīng)式原理并不完全一致，二者之間存在較大差別。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)4.Vue2的響應(yīng)式區(qū)別Vue2使用ES5的Object.defineProperty()方法，重新定義對(duì)象獲取屬性值的方法get()和設(shè)置屬性值的方法set()，實(shí)現(xiàn)了Vue的“雙向數(shù)據(jù)綁定”操作。需要注意的是，該方法存在一些不足，如性能較差、無法偵測(cè)對(duì)象新增屬性、無法偵測(cè)數(shù)組的length變化等。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)5.Vue3的響應(yīng)式區(qū)別Vue的作者重構(gòu)了Vue3響應(yīng)式系統(tǒng)，使用ES6中的Proxy替換Object.defineProperty()方法。Proxy被稱為代理器，可實(shí)現(xiàn)對(duì)其他對(duì)象的代理，外界對(duì)被代理對(duì)象進(jìn)行的所有操作，均會(huì)被Proxy攔截、過濾、代理操作。在Vue3中，無需像Object.defineProperty()方法一樣逐一遍歷被攔截對(duì)象的每個(gè)屬性，這大大提升了Vue的性能。除此之外，Proxy可直接監(jiān)聽數(shù)組類型的變化，無需借助包裝方法操作數(shù)組。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)近兩年前端技術(shù)層出不窮，目前市面上供前端人員使用的開發(fā)框架愈加豐富，前端框架領(lǐng)域也日趨成熟，基本形成了Angular、React和Vue三足鼎立的局面。1.Vue與Angular（1）Angular是強(qiáng)主張的，開發(fā)者使用Angular時(shí)，必須接受它的使用規(guī)則，如模塊機(jī)制、必須依賴注入、特殊形式定義組件等。（2）Angular帶有比較強(qiáng)的排它性，當(dāng)使用Angular框架所開發(fā)的項(xiàng)目需要不斷集成其他方案時(shí)，Angular的強(qiáng)主張會(huì)要求開發(fā)者花費(fèi)大量時(shí)間來掌握Angular的全部生態(tài)。1.3走近Vue.js1.3.5前端框架對(duì)比2.Vue與React（1）在響應(yīng)式原理上，React推崇函數(shù)式編程，堅(jiān)持手動(dòng)優(yōu)化，數(shù)據(jù)不可變。Vue依賴數(shù)據(jù)收集實(shí)現(xiàn)自動(dòng)優(yōu)化，數(shù)據(jù)可變。（2）在組件寫法上，React推薦JSX寫法，也就是把HTML和CSS全都寫進(jìn)JavaScript中。Vue也支持JSX寫法，但Vue更推薦template的單文件組件格式，即HTML、CSS、JS寫在同一個(gè)文件。（3）在渲染效率上，React應(yīng)用程序的狀態(tài)被改變時(shí)，其全部子組件都會(huì)重新渲染。而Vue在渲染期間會(huì)自動(dòng)跟蹤每一個(gè)組件的依賴關(guān)系，準(zhǔn)確把握需要重新渲染的組件，避免重新渲染整個(gè)組件樹，提升系統(tǒng)的渲染效率。1.3走近Vue.js1.3.5前端框架對(duì)比1.4Vue.js3.0的新變化響應(yīng)式系統(tǒng)性能優(yōu)化組合API（CompositionAPI）碎片（Fragment）Tree-shaking支持Teleport懸念（Suspense）更好的TypeScript支持2020年9月，Vue.js3.0（簡(jiǎn)稱為Vue3.0或Vue3）正式發(fā)布。Vue3是一套組合拳，它帶來的變化全面而繁雜，Vue3采用TypeScript重寫了Vue2的框架，將新版API設(shè)為普通類型的函數(shù)，使開發(fā)者開發(fā)時(shí)獲得完整的類型推斷體驗(yàn)。1.響應(yīng)式系統(tǒng)Vue2利用Object.defineProperty()方法偵聽對(duì)象屬性的變化，但該方法存在一定的缺陷。Vue3對(duì)Vue2的響應(yīng)式系統(tǒng)進(jìn)行了重構(gòu)，使用Proxy替代Object.defineProperty()方法，彌補(bǔ)了Vue2的不足，響應(yīng)式系統(tǒng)的詳細(xì)介紹具體見本書1.3.4節(jié)，此處不再進(jìn)行贅述。1.4Vue.js3.0的新變化2.性能優(yōu)化隨著Vue3對(duì)虛擬DOM的重寫，編譯器的優(yōu)化，開發(fā)者可以根據(jù)編譯時(shí)的提示來減少運(yùn)行時(shí)的開銷，使系統(tǒng)渲染和更新的性能獲得大幅度提升，服務(wù)端渲染的性能也獲得2~3倍的提升。3.組合API（CompositionAPI）Vue3引入了基于函數(shù)設(shè)計(jì)的組合式API。組合式API是一組低侵入式的、函數(shù)式的API，使得開發(fā)者能夠更靈活地組合組件間的邏輯，無副作用地復(fù)用代碼，高效地進(jìn)行類型判斷。在Vue2中主要借助Mixin來實(shí)現(xiàn)功能復(fù)用，但大量的Mixin雜糅在一起使開發(fā)者很難判斷復(fù)用的功能來源于哪個(gè)Mixin，在開發(fā)中，推薦開發(fā)者使用組合式API。1.4Vue.js3.0的新變化4.碎片（Fragment）Vue2要求Vue文件必須擁有唯一的根節(jié)點(diǎn)，在Vue3中，這個(gè)限制已經(jīng)被移除。Vue3引入了碎片的概念，碎片是一種新的聲明方式，用于描述可能的、不唯一的節(jié)點(diǎn)樹。使用碎片，讀者可以在一個(gè)Vue文件中定義多個(gè)根節(jié)點(diǎn)。5.Tree-shaking支持Vue3僅打包真正需要的模塊，會(huì)對(duì)無用的模塊進(jìn)行“剪枝