基礎知識篇

第1章 Vue基礎入門

1.1　Vue概述

在互聯網技術的蠻荒時代，前后端開發的界限還不是很清晰，所有的工作都由后端程序員完成。隨著互聯網的發展，前端所負責的業務邏輯不斷復雜化，前端開發崗位也逐漸被分化并獨立出來專注于網頁的樣式制作。近幾年，前端工程化這個概念被廣泛地提及和討論，在互聯網高速發展的今天，前端工程師可以說撐起了互聯網應用的“半壁江山”。

前端開發從最初的“切圖”發展到現在各式各樣的前端框架，目前最流行的三大框架：Vue.js、React.js、Angular.js，其中Vue以其簡單易學、性能優越、漸進式等特性，在三大框架中脫穎而出。截至2019年3月，Vue在GitHub上的星數已經超過其他兩個框架，成為三大框架中最熱門的框架。

1.1.1　MVC到MVVM的演化歷程

在學習Vue之前，我們先來了解一下常見的軟件設計模式。

1．MVC模式

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

MVC模式的特點是使用業務邏輯、模型數據、界面展示三部分相分離的方式來組織代碼結構，在MVC設計模式中各部分的功能如下。

Model層對要處理的業務邏輯和數據進行操作，并且接收View層請求的數據，然后對數據進行計算、校驗、處理，最后返回最終的處理結果，整個過程不直接與用戶產生交互；

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

Controller層相當于Model層和View層的橋梁，負責收集用戶輸入的數據，從對應的模型獲取數據并返回給相應的視圖，以此完成交互請求，使模型和視圖保持一致，如圖1.1所示。

MVC模式實現了Model層和View層的代碼分離，Model層專注于數據管理，View層則專注于數據顯示，Controller層在二者之間架起了一座橋梁。將業務邏輯聚集到一個部件中，在更新不同的界面或用戶產生交互時，即使訪問同樣的數據，也會得到不同的頁面呈現，由于無須重寫業務邏輯的代碼，而且減少了Model層的冗余代碼，使得Model層和 View層更加靈活和易于維護。由于MVC中3個模塊的相互獨立，改變任意一個模塊都不會對另外兩個模塊造成影響，從而對Model層和View層進行了解耦。

伴隨技術的不斷迭代，MVC模式逐漸演化出更多的形態。無論演化的是哪種版本及形態，都離不開MVC模式的本質。所以，在某些文章中就將這種衍生版本統稱為“MV *模式”，其中，MVVM模式就是典型代表之一。

2．MVVM模式

模型-視圖-視圖模型（Model-View-ViewModel，MVVM）模式是MVC的衍生版本，其主要目的是分離View層和Model層。模型指的是服務器端傳遞的數據，視圖指的是瀏覽器中渲染的網頁，視圖模型是MVVM模式的核心，連接了View層和Model層。在MVVM模式中，主要通過兩個方面實現數據的雙向綁定：一方面通過數據綁定將后端傳遞的數據轉化為用戶可以看到的頁面；另一方面通過DOM事件的監聽，將用戶看到的頁面轉換為后端數據，如圖1.2所示。

MVVM模式是對View（視圖）和Model（模型）的解耦，在接收到用戶的請求后，ViewModel獲取Model層響應的數據，并通過數據綁定將相應的View層重新渲染，即Model層只需傳入一個數據就可以實現View層的同步更新，從而實現View層和Model層之間的松散耦合。

Vue就是基于MVVM模式設計的一套框架，在Vue中，JavaScript的數據相當于Model，例如對象、數組等，HTML頁面相當于View，而Vue實例化對象相當于ViewModel。

1.1.2　Vue簡介

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

漸進式框架就是在項目開發中只需關注需要的功能特性，而不需要的部分功能可以先忽略，Vue不強求你一次性接受并使用它的全部功能特性。

自底向上設計是一種設計程序的過程和方法，我們可以將其理解為先編寫項目的基礎代碼部分，然后逐步擴大規模、補充和升級核心功能。

1.1.3　虛擬DOM與Diff算法

在傳統的開發模式中，原生JavaScript操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍。例如，在一次操作中需要更新10個DOM節點，當瀏覽器收到第一個DOM更新請求后并不知道后面還有9個更新請求，所以會馬上執行渲染流程，直到最終執行10次。但是在每次重新更新時，前面更新DOM的操作都會變成無用功，瀏覽器在計算DOM節點時白白浪費了性能，如果頻繁操作，還會產生頁面卡頓，從而影響用戶體驗。

虛擬DOM的設計就是為了解決瀏覽器性能問題，若一次操作中有10次更新DOM的動作，虛擬DOM不會立即操作DOM，而是將這10次操作更新的Diff內容保存到本地的一個JS對象中，最終將這個JS對象一次性attach到DOM樹上，再進行后續操作，避免大量無謂的計算量。