基礎(chǔ)知識(shí)篇

第1章 Vue基礎(chǔ)入門(mén)

1.1　Vue概述

在互聯(lián)網(wǎng)技術(shù)的蠻荒時(shí)代，前后端開(kāi)發(fā)的界限還不是很清晰，所有的工作都由后端程序員完成。隨著互聯(lián)網(wǎng)的發(fā)展，前端所負(fù)責(zé)的業(yè)務(wù)邏輯不斷復(fù)雜化，前端開(kāi)發(fā)崗位也逐漸被分化并獨(dú)立出來(lái)專(zhuān)注于網(wǎng)頁(yè)的樣式制作。近幾年，前端工程化這個(gè)概念被廣泛地提及和討論，在互聯(lián)網(wǎng)高速發(fā)展的今天，前端工程師可以說(shuō)撐起了互聯(lián)網(wǎng)應(yīng)用的“半壁江山”。

前端開(kāi)發(fā)從最初的“切圖”發(fā)展到現(xiàn)在各式各樣的前端框架，目前最流行的三大框架：Vue.js、React.js、Angular.js，其中Vue以其簡(jiǎn)單易學(xué)、性能優(yōu)越、漸進(jìn)式等特性，在三大框架中脫穎而出。截至2019年3月，Vue在GitHub上的星數(shù)已經(jīng)超過(guò)其他兩個(gè)框架，成為三大框架中最熱門(mén)的框架。

1.1.1　MVC到MVVM的演化歷程

在學(xué)習(xí)Vue之前，我們先來(lái)了解一下常見(jiàn)的軟件設(shè)計(jì)模式。

1．MVC模式

模型-視圖-控制器（Mode-lView-Controller，MVC）模式是一種經(jīng)典的軟件設(shè)計(jì)模式。在軟件技術(shù)發(fā)展之初，MVC模式被應(yīng)用于桌面應(yīng)用程序中，隨著PHP、JSP等腳本語(yǔ)言的誕生，MVC模式又被應(yīng)用于早期的Web架構(gòu)中，逐漸成為Web 1.0時(shí)代的主流模式。

MVC模式的特點(diǎn)是使用業(yè)務(wù)邏輯、模型數(shù)據(jù)、界面展示三部分相分離的方式來(lái)組織代碼結(jié)構(gòu)，在MVC設(shè)計(jì)模式中各部分的功能如下。

Model層對(duì)要處理的業(yè)務(wù)邏輯和數(shù)據(jù)進(jìn)行操作，并且接收View層請(qǐng)求的數(shù)據(jù)，然后對(duì)數(shù)據(jù)進(jìn)行計(jì)算、校驗(yàn)、處理，最后返回最終的處理結(jié)果，整個(gè)過(guò)程不直接與用戶(hù)產(chǎn)生交互；

View層是用戶(hù)能夠看到的并且可以與之交互的客戶(hù)端界面，例如桌面應(yīng)用中的圖形界面，以及Web應(yīng)用中的瀏覽器渲染的網(wǎng)頁(yè)等；

Controller層相當(dāng)于Model層和View層的橋梁，負(fù)責(zé)收集用戶(hù)輸入的數(shù)據(jù)，從對(duì)應(yīng)的模型獲取數(shù)據(jù)并返回給相應(yīng)的視圖，以此完成交互請(qǐng)求，使模型和視圖保持一致，如圖1.1所示。

MVC模式實(shí)現(xiàn)了Model層和View層的代碼分離，Model層專(zhuān)注于數(shù)據(jù)管理，View層則專(zhuān)注于數(shù)據(jù)顯示，Controller層在二者之間架起了一座橋梁。將業(yè)務(wù)邏輯聚集到一個(gè)部件中，在更新不同的界面或用戶(hù)產(chǎn)生交互時(shí)，即使訪(fǎng)問(wèn)同樣的數(shù)據(jù)，也會(huì)得到不同的頁(yè)面呈現(xiàn)，由于無(wú)須重寫(xiě)業(yè)務(wù)邏輯的代碼，而且減少了Model層的冗余代碼，使得Model層和 View層更加靈活和易于維護(hù)。由于MVC中3個(gè)模塊的相互獨(dú)立，改變?nèi)我庖粋€(gè)模塊都不會(huì)對(duì)另外兩個(gè)模塊造成影響，從而對(duì)Model層和View層進(jìn)行了解耦。

伴隨技術(shù)的不斷迭代，MVC模式逐漸演化出更多的形態(tài)。無(wú)論演化的是哪種版本及形態(tài)，都離不開(kāi)MVC模式的本質(zhì)。所以，在某些文章中就將這種衍生版本統(tǒng)稱(chēng)為“MV *模式”，其中，MVVM模式就是典型代表之一。

2．MVVM模式

模型-視圖-視圖模型（Model-View-ViewModel，MVVM）模式是MVC的衍生版本，其主要目的是分離View層和Model層。模型指的是服務(wù)器端傳遞的數(shù)據(jù)，視圖指的是瀏覽器中渲染的網(wǎng)頁(yè)，視圖模型是MVVM模式的核心，連接了View層和Model層。在MVVM模式中，主要通過(guò)兩個(gè)方面實(shí)現(xiàn)數(shù)據(jù)的雙向綁定：一方面通過(guò)數(shù)據(jù)綁定將后端傳遞的數(shù)據(jù)轉(zhuǎn)化為用戶(hù)可以看到的頁(yè)面；另一方面通過(guò)DOM事件的監(jiān)聽(tīng)，將用戶(hù)看到的頁(yè)面轉(zhuǎn)換為后端數(shù)據(jù)，如圖1.2所示。

MVVM模式是對(duì)View（視圖）和Model（模型）的解耦，在接收到用戶(hù)的請(qǐng)求后，ViewModel獲取Model層響應(yīng)的數(shù)據(jù)，并通過(guò)數(shù)據(jù)綁定將相應(yīng)的View層重新渲染，即Model層只需傳入一個(gè)數(shù)據(jù)就可以實(shí)現(xiàn)View層的同步更新，從而實(shí)現(xiàn)View層和Model層之間的松散耦合。

Vue就是基于MVVM模式設(shè)計(jì)的一套框架，在Vue中，JavaScript的數(shù)據(jù)相當(dāng)于Model，例如對(duì)象、數(shù)組等，HTML頁(yè)面相當(dāng)于View，而Vue實(shí)例化對(duì)象相當(dāng)于ViewModel。

1.1.2　Vue簡(jiǎn)介

Vue是一套輕量級(jí)MVVM框架，與React和Angular有所不同，Vue的核心庫(kù)只關(guān)注View層，并且提供了簡(jiǎn)單的API和容易上手的操作機(jī)制，例如雙向數(shù)據(jù)綁定、組件復(fù)用等，此外還很容易與第三方庫(kù)進(jìn)行整合。Vue的漸進(jìn)式和自底向上逐層應(yīng)用的設(shè)計(jì)，使其成為十分優(yōu)秀的前端框架。下面我們來(lái)解釋一下什么是漸進(jìn)式框架和自底向上逐層應(yīng)用。

漸進(jìn)式框架就是在項(xiàng)目開(kāi)發(fā)中只需關(guān)注需要的功能特性，而不需要的部分功能可以先忽略，Vue不強(qiáng)求你一次性接受并使用它的全部功能特性。

自底向上設(shè)計(jì)是一種設(shè)計(jì)程序的過(guò)程和方法，我們可以將其理解為先編寫(xiě)項(xiàng)目的基礎(chǔ)代碼部分，然后逐步擴(kuò)大規(guī)模、補(bǔ)充和升級(jí)核心功能。

1.1.3　虛擬DOM與Diff算法

在傳統(tǒng)的開(kāi)發(fā)模式中，原生JavaScript操作DOM時(shí)，瀏覽器會(huì)從構(gòu)建DOM樹(shù)開(kāi)始從頭到尾執(zhí)行一遍。例如，在一次操作中需要更新10個(gè)DOM節(jié)點(diǎn)，當(dāng)瀏覽器收到第一個(gè)DOM更新請(qǐng)求后并不知道后面還有9個(gè)更新請(qǐng)求，所以會(huì)馬上執(zhí)行渲染流程，直到最終執(zhí)行10次。但是在每次重新更新時(shí)，前面更新DOM的操作都會(huì)變成無(wú)用功，瀏覽器在計(jì)算DOM節(jié)點(diǎn)時(shí)白白浪費(fèi)了性能，如果頻繁操作，還會(huì)產(chǎn)生頁(yè)面卡頓，從而影響用戶(hù)體驗(yàn)。

虛擬DOM的設(shè)計(jì)就是為了解決瀏覽器性能問(wèn)題，若一次操作中有10次更新DOM的動(dòng)作，虛擬DOM不會(huì)立即操作DOM，而是將這10次操作更新的Diff內(nèi)容保存到本地的一個(gè)JS對(duì)象中，最終將這個(gè)JS對(duì)象一次性attach到DOM樹(shù)上，再進(jìn)行后續(xù)操作，避免大量無(wú)謂的計(jì)算量。