- Vue.js企業(yè)開發(fā)實戰(zhàn)
- 千鋒教育高教產(chǎn)品研發(fā)部編著
- 5字
- 2022-07-28 19:42:39
基礎(chǔ)知識篇
第1章 Vue基礎(chǔ)入門
1.1 Vue概述
在互聯(lián)網(wǎng)技術(shù)的蠻荒時代,前后端開發(fā)的界限還不是很清晰,所有的工作都由后端程序員完成。隨著互聯(lián)網(wǎng)的發(fā)展,前端所負責的業(yè)務(wù)邏輯不斷復(fù)雜化,前端開發(fā)崗位也逐漸被分化并獨立出來專注于網(wǎng)頁的樣式制作。近幾年,前端工程化這個概念被廣泛地提及和討論,在互聯(lián)網(wǎng)高速發(fā)展的今天,前端工程師可以說撐起了互聯(lián)網(wǎng)應(yīng)用的“半壁江山”。
前端開發(fā)從最初的“切圖”發(fā)展到現(xiàn)在各式各樣的前端框架,目前最流行的三大框架:Vue.js、React.js、Angular.js,其中Vue以其簡單易學、性能優(yōu)越、漸進式等特性,在三大框架中脫穎而出。截至2019年3月,Vue在GitHub上的星數(shù)已經(jīng)超過其他兩個框架,成為三大框架中最熱門的框架。
1.1.1 MVC到MVVM的演化歷程
在學習Vue之前,我們先來了解一下常見的軟件設(shè)計模式。
1.MVC模式
模型-視圖-控制器(Mode-lView-Controller,MVC)模式是一種經(jīng)典的軟件設(shè)計模式。在軟件技術(shù)發(fā)展之初,MVC模式被應(yīng)用于桌面應(yīng)用程序中,隨著PHP、JSP等腳本語言的誕生,MVC模式又被應(yīng)用于早期的Web架構(gòu)中,逐漸成為Web 1.0時代的主流模式。
MVC模式的特點是使用業(yè)務(wù)邏輯、模型數(shù)據(jù)、界面展示三部分相分離的方式來組織代碼結(jié)構(gòu),在MVC設(shè)計模式中各部分的功能如下。
Model層對要處理的業(yè)務(wù)邏輯和數(shù)據(jù)進行操作,并且接收View層請求的數(shù)據(jù),然后對數(shù)據(jù)進行計算、校驗、處理,最后返回最終的處理結(jié)果,整個過程不直接與用戶產(chǎn)生交互;
View層是用戶能夠看到的并且可以與之交互的客戶端界面,例如桌面應(yīng)用中的圖形界面,以及Web應(yīng)用中的瀏覽器渲染的網(wǎng)頁等;
Controller層相當于Model層和View層的橋梁,負責收集用戶輸入的數(shù)據(jù),從對應(yīng)的模型獲取數(shù)據(jù)并返回給相應(yīng)的視圖,以此完成交互請求,使模型和視圖保持一致,如圖1.1所示。
MVC模式實現(xiàn)了Model層和View層的代碼分離,Model層專注于數(shù)據(jù)管理,View層則專注于數(shù)據(jù)顯示,Controller層在二者之間架起了一座橋梁。將業(yè)務(wù)邏輯聚集到一個部件中,在更新不同的界面或用戶產(chǎn)生交互時,即使訪問同樣的數(shù)據(jù),也會得到不同的頁面呈現(xiàn),由于無須重寫業(yè)務(wù)邏輯的代碼,而且減少了Model層的冗余代碼,使得Model層和 View層更加靈活和易于維護。由于MVC中3個模塊的相互獨立,改變?nèi)我庖粋€模塊都不會對另外兩個模塊造成影響,從而對Model層和View層進行了解耦。

圖1.1 MVC模式
伴隨技術(shù)的不斷迭代,MVC模式逐漸演化出更多的形態(tài)。無論演化的是哪種版本及形態(tài),都離不開MVC模式的本質(zhì)。所以,在某些文章中就將這種衍生版本統(tǒng)稱為“MV *模式”,其中,MVVM模式就是典型代表之一。
2.MVVM模式
模型-視圖-視圖模型(Model-View-ViewModel,MVVM)模式是MVC的衍生版本,其主要目的是分離View層和Model層。模型指的是服務(wù)器端傳遞的數(shù)據(jù),視圖指的是瀏覽器中渲染的網(wǎng)頁,視圖模型是MVVM模式的核心,連接了View層和Model層。在MVVM模式中,主要通過兩個方面實現(xiàn)數(shù)據(jù)的雙向綁定:一方面通過數(shù)據(jù)綁定將后端傳遞的數(shù)據(jù)轉(zhuǎn)化為用戶可以看到的頁面;另一方面通過DOM事件的監(jiān)聽,將用戶看到的頁面轉(zhuǎn)換為后端數(shù)據(jù),如圖1.2所示。

圖1.2 MVVM模式
MVVM模式是對View(視圖)和Model(模型)的解耦,在接收到用戶的請求后,ViewModel獲取Model層響應(yīng)的數(shù)據(jù),并通過數(shù)據(jù)綁定將相應(yīng)的View層重新渲染,即Model層只需傳入一個數(shù)據(jù)就可以實現(xiàn)View層的同步更新,從而實現(xiàn)View層和Model層之間的松散耦合。
Vue就是基于MVVM模式設(shè)計的一套框架,在Vue中,JavaScript的數(shù)據(jù)相當于Model,例如對象、數(shù)組等,HTML頁面相當于View,而Vue實例化對象相當于ViewModel。
1.1.2 Vue簡介
Vue是一套輕量級MVVM框架,與React和Angular有所不同,Vue的核心庫只關(guān)注View層,并且提供了簡單的API和容易上手的操作機制,例如雙向數(shù)據(jù)綁定、組件復(fù)用等,此外還很容易與第三方庫進行整合。Vue的漸進式和自底向上逐層應(yīng)用的設(shè)計,使其成為十分優(yōu)秀的前端框架。下面我們來解釋一下什么是漸進式框架和自底向上逐層應(yīng)用。
漸進式框架就是在項目開發(fā)中只需關(guān)注需要的功能特性,而不需要的部分功能可以先忽略,Vue不強求你一次性接受并使用它的全部功能特性。
自底向上設(shè)計是一種設(shè)計程序的過程和方法,我們可以將其理解為先編寫項目的基礎(chǔ)代碼部分,然后逐步擴大規(guī)模、補充和升級核心功能。
1.1.3 虛擬DOM與Diff算法
在傳統(tǒng)的開發(fā)模式中,原生JavaScript操作DOM時,瀏覽器會從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍。例如,在一次操作中需要更新10個DOM節(jié)點,當瀏覽器收到第一個DOM更新請求后并不知道后面還有9個更新請求,所以會馬上執(zhí)行渲染流程,直到最終執(zhí)行10次。但是在每次重新更新時,前面更新DOM的操作都會變成無用功,瀏覽器在計算DOM節(jié)點時白白浪費了性能,如果頻繁操作,還會產(chǎn)生頁面卡頓,從而影響用戶體驗。
虛擬DOM的設(shè)計就是為了解決瀏覽器性能問題,若一次操作中有10次更新DOM的動作,虛擬DOM不會立即操作DOM,而是將這10次操作更新的Diff內(nèi)容保存到本地的一個JS對象中,最終將這個JS對象一次性attach到DOM樹上,再進行后續(xù)操作,避免大量無謂的計算量。
- 版面設(shè)計與制作
- Bootstrap響應(yīng)式Web開發(fā)
- 網(wǎng)頁設(shè)計那些事兒
- 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)從入門到精通
- Web前端開發(fā)精品課 HTML與CSS進階教程
- 全能網(wǎng)頁設(shè)計師精煉手冊
- 速學速通:快學Flash動畫制作
- Photoshop電商網(wǎng)頁廣告設(shè)計實戰(zhàn)從入門到精通
- 《練就職場功夫熊貓》
- 在實戰(zhàn)中成長:JSP開發(fā)之路
- H5頁面設(shè)計與制作(全彩慕課版)
- 網(wǎng)頁設(shè)計綜合實踐教程
- 眾妙之門:JavaScript與jQuery技術(shù)精粹
- 別具光芒:CSS網(wǎng)頁布局案例剖析
- JavaScript+jQuery Web開發(fā)案例教程(在線實訓版)