基礎(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層進行了解耦。

伴隨技術(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所示。

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ù)操作，避免大量無謂的計算量。