我們為什麼選擇VUE來構建前端

很多使用過VUE的程式設計師，對VUE的評價是“Vue.js 兼具angular.js和react.js的優點，並剔除了它們的缺點”。

那麼，他真的值得這麼高的評價嘛?

Vue.js的創造者是一位傑出的中國人-尤雨溪（EvanYou）。在開發工具方面，中國人的創造少之又少，這一點或許為其加分不少。不過，情懷畢竟代替不了實際需求，VUE的崛起在於其確實是一個相當優秀的框架。他並不像很多其他程式語言一樣晦澀難懂，所見即所得是其基本特點，正是由於這一特點，很多初學者也會將其作為入門語言。

 

我們知道，約翰·雷西格釋出了 jQuery 的第一個版本，從此前端開發進入了 jQuery 時代；站在巨人的肩膀上，我們可以看得更遠，一系列基於js的框架如雨後春筍般冒了出來，但大多曇花一現，除了Angular、React、Vue這些主流之外，其他的都在艱難生存。

為什麼會有框架

任何事物的存在都因有其需求，其根本是為了解決一些現實問題。同樣的道理，框架也是如此，就像vue作者所說的那樣：框架的存在是為了幫助我們應對複雜度。

不過，框架本身依然存在著複雜度，就好比我們用扳手去擰螺絲，扳手就是框架。它相當於一個工具，工具本身也有學習成本，只不過他的學習成本要低很多。我們使用這個工具來去解決擰螺絲這樣一個如果沒有扳手會變得相當複雜的問題，這和使用前端框架去解決在工作中遇到的一個複雜專案的時候所經歷的過程是一樣的。

所以，很自然的就會在我們使用的框架（工具——扳手）和想要去解決的問題（複雜度——擰螺絲）之間進行抉擇，我們會更趨向於使用一個簡單的工具來去解決一個複雜的問題，這就是框架存在的意義了。

這樣，我們就希望框架變得越來越簡單，而它能解決的問題可以越來越複雜。比較幸運的是，目前都在朝著我們希望的方向走。

目前的主流框架

目前討論比較多的前端框架主要有三個，看看開發者們觀點：

Angular、React、Vue

透過它們在 GitHub 的 Star 歷史和 NPM 的下載趨勢圖來對比一下。

Angular、React 和 Vue 的 GitHub Star 歷史：

 

npm 的下載趨勢圖：

 

可以看到在 GitHub 上面，Vue 的資料上升最快，並且在 2018 年 6 月 28 日已經超過了 React，成為了最受歡迎的前端框架。

而在 npm 中，React 的資料遙遙領先，這得益於 React 強大的社群力量，我們無法否認，React 社群作為當前最活躍的前端社群，提供出了特別多優秀的想法和理念，它們為 React 提供了強大的生態支援，同時也讓我們在選擇周邊框架的時候需要進行更多的選擇。

當然這三個框架都非常的優秀，我們不去討論它們的優劣，我們的選擇都只是基於我們的取捨：我們希望工具足夠簡單，而它可以解決的問題卻要足夠複雜。這就夠了，不是嗎？

Angular 期望做的事情非常多，比如說它會包含著它自己的路由，這讓我們決定去使用 Angular 的時候，就必須要接受它的全部，這就使得學習成本變得更高，但同時選擇變得會更少，不過有時候選擇少了並非是一件壞事，它可以讓我們更加專注。

React 與 Vue 一樣都是專注只做介面，而其他的所有一切都會有各種配套的工具，比如說路由，或者狀態管理工具，所以說使用它們的話你可能需要做更多的選擇，而這種方式則使得它們本身（React、Vue）的學習曲線相對平緩。

從上面的分析可以看出，Angular 提供了一個複雜的工具，用於解決一整套複雜的問題。而 React 與 Vue 則專注於解決一個特定的問題，而把其他的問題交給了它們的生態圈來處理，這樣做的同時也會讓我們花更多的時間來選擇合適的周邊工具。

所以說這些框架各有優劣，並沒有絕對的誰好誰壞之分，我們選擇什麼樣的工具，取決於我們面對了什麼樣的問題。沒有人會喜歡用大炮去打蚊子，也沒有人會想到用蒼蠅拍來打大象。我們喜歡剛剛好，追求事半功倍，如果你也是這麼想的，那麼至少我們的底層觀念是一致的。

Vue 的特點

說了這麼多，回到今天的重點，看看VUE所代表的漸進式框架到底有什麼魅力。

主要從以下幾方面來講：

MVVM 框架

單頁面應用程式

輕量化與易學習

漸進式與相容性

檢視元件化

虛擬 DOM（Virtual DOM）

社群支援

未來走向

1.MVVM 框架

所謂 MVVM 框架就是：Model-View-ViewModel，就像下面這樣：

 

那麼這個 MVVM 框架，應該怎麼去理解呢？它的第一個 View，相當於頁面中的 DOM，最後一個 Model 相當於資料來源，就像下面這個樣子：

 

其中，a標籤就是 DOM，data物件就是資料來源，這兩者之間永遠不會直接通訊，它們所有的聯絡都是透過 ViewModel，也就是監控者來進行的。監控者會去負責檢測資料的變化，然後把資料實時展示在頁面中。例如，把text的內容更改為“Hello Vue”的話，那麼a標籤中展示的內容，也會自動變為 “Hello Vue”。這樣就不需要手動的操作 DOM，所有對 DOM 操作都會透過監控者來完成。如果以前寫過複雜的 DOM 操作的話（如 **.parent().parent().parent()...），就會發現這種方式帶來的便利。

Vue 正是使用了這種 MVVM 的框架形式，並且透過宣告式渲染和響應式資料繫結的方式來幫助我們完全避免了對 DOM 的操作。

2.單頁面應用程式

單頁面應用程式（SPA），一般指為：一個頁面就是一個應用（或子應用）。隨著技術的發展，現在的前端網頁早已不只侷限於在瀏覽器上展示了，手機 App 上、微信公眾號上都有了越來越多的展示機會。

那麼如果把傳統的多頁面應用形式放入到我們的手機上面會是什麼樣子呢？當進行頁面跳轉開啟一個新的頁面的時候，它會變成這樣：

 

等的花兒都謝了 有沒有？

而如果使用單頁面的形式來開發的話，就不會出現這樣一種情況。因為我們的整個應用就只有一個頁面，當我們的這一個單頁被載入進來之後，就不會再進行關於頁面的網路請求。Vue 配合生態圈中的 Vue-Router 就可以非常方便的開發複雜的單頁應用。

3.輕量化與易學習

我們知道網頁中引入的 JS 體積越大，那麼載入所需要耗費的時間就越長，反之體積越小，則越節省時間。所以我們會更傾向於使用體積更小的 JS 檔案，這也是為什麼在生產版本會引入 .min 的 JS 的原因。下面是我從 Vue 官網的截圖：

 

以Vue穩定版2.5.16為例，從截圖中可以看到 Vue 的生產版本只有 30.90KB 的大小，幾乎不會對我們的網頁載入速度產生影響。同時因為 Vue 只專注於檢視層，單獨的Vue就像一個庫一樣，所以使我們的學習成本變得非常低。

4.漸進式與相容性

漸進式框架就是：我只做分內的事情，並且不會對你要求太多。

Vue的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。

這是 Vue 官網上面的一句話，正如在上面所說的，Vue只做介面，而把其他的一切都交給了它的周邊生態來做處理，這就要求Vue必須要對其他的框架擁有最大程度的相容性。

例如，一開始只想做一個靜態站，那麼可以只引入 Vue 來去構建介面，過了一段時間，你想在網站上加入訪問網路的功能，那麼你可以再引入axios（Vue 官方推薦）或者其他的（哪怕是jQuery）網路請求框架，而後來隨著你的網站越做越大，你想要把你的網站變成一個大型的 Web 應用的時候，可以引入一些其他你需要的 JS 檔案，如 Loadsh.js、Velocity.js 等。

5.檢視元件化

所謂檢視元件化就是把我們的網頁拆分為一個個的元件，就像下面這樣：

 

Vue 允許透過元件來去拼裝一個頁面，每個元件都是一個可複用的 Vue 例項，元件裡面可以包含自己的資料，檢視和程式碼邏輯。比如說：

 

CSDN 的這個個人資料模組，大家都已經不陌生了吧，當我們的 Web 應用中有多個頁面都使用到這個個人資料模組的時候，就可以把它封裝成一個元件，這個元件擁有單獨的程式碼邏輯、CSS 樣式、資料等，在任何一個我們需要使用到它的地方，就可以透過

<component-name></component-name>

Vue.component('component-name', {

...

});

這種方式來直接引入了。

除此之外，很多領軍企業也正在使用vue。比如，餓了麼、掘金、蘇寧易購、美團、天貓、Laravel、htmlBurger等。

6.Virtual DOM

Virtual DOM 也就是虛擬 DOM，大家知道瀏覽器去處理 DOM 操作時，是存在效能問題的，這也是我們在使用 jQuery 或者原生 JavaScript 來去頻繁操作 DOM 進行資料渲染的時候，我們的頁面經常出現卡頓的原因。

而虛擬 DOM 則是預先透過 JavaScript 的各種運算，把最終需要生成的 DOM 計算出來，並且進行最佳化，在計算完成之後才會將計算出的 DOM 放到我們的 DOM 樹中。由於這種操作的方式並沒有進行真實的 DOM 操作，所以才會叫它虛擬 DOM。

我們在前面說過：

Vue 是透過宣告式渲染和響應式資料繫結的方式來幫助我們完全避免了對 DOM 的操作。

Vue 之所以可以完全避免對 DOM 的操作，就是因為 Vue 採用了虛擬 DOM 的方式，不但避免了我們對 DOM 的複雜操作，並且大大的加快了我們應用的執行速度。

7.來自社群支援

雖然在全球中 Vue 的社群並沒有 React 社群那麼的繁華，但得益於 Vue 的本土化身份，再加上 Vue 本身的強大，所以湧現出了特別多的國內社群，如、vuejs.com.cn等。這種情況在其他的框架身上是沒有出現過的，這使得我們在學習或者使用 Vue 的時候，可以獲得更多的幫助。

 

8.Vue的未來走向

Vue 是由國人尤雨溪在 Google 工作的時候，為了方便自己的工作而開發出來的一個庫，而在 Vue 被使用的過程中，突然發現越來越多的人喜歡上了它。所以尤雨溪就進入了一個邊工作、邊維護的狀態，在這種情況下 Vue 依然迅速的發展。

而現在尤雨溪已經正式辭去了 Google 的工作，開始專職維護 Vue，同時加入進來的還有幾十位優秀的開發者，他們致力於把 Vue 打造為最受歡迎的前端框架。事實證明 Vue 確實在往越來越好的方向發展了（從 Angular、React、Vue 的對比圖中可以看出 Vue 的勢頭）。

所以，至少vue的未來發展不用擔心，在沒有顛覆性的創新出來之前，vue都會越做越好。

原.前端小王子