爲何那麼多前端都選擇用 Vue.js框架？

程序人生

咱們選擇了這個 IT 行業，天然但願可以在這個行業走得更遠。我相信沒有任何一我的會甘於平庸，你們都但願可以在本身所處的行業以及所處的領域中有所建樹，但願能夠實現本身的價值，以獲取社會的承認。而若是要實現這個目標的話，咱們將要投入更多的時間和精力，才能博得更多的機會。在成長的過程當中，不可避免的會踩一些坑、走一些彎路，那麼有沒有辦法能夠避免少踩一些坑、少走一些彎路呢？萬幸的是，答案是有的。

站在巨人的肩膀上，咱們能夠看得更遠，約翰 · 雷西格發佈了 jQuery 的第一個版本，今後讓咱們進入了 jQuery 時代；尤雨溪創造了 Vue，使咱們正式邁入 Vue 的時代。這些領軍者，讓咱們可以看得更遠，讓咱們的工做和生活變得更加簡單。因此這應該是全部前端開發者選用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 指望作的事情很是多，好比說它會包含着它本身的路由，這讓咱們決定去使用 Angular 的時候，就必需要接受它的所有，這就使得學習成本變得更高，但同時選擇變得會更少，不過有時候選擇少了並不是是一件壞事，它可讓咱們更加專一。

React 與 Vue：React 與 Vue 同樣都是專一隻作界面，而其餘的全部一切都會有各類配套的工具，好比說路由，或者狀態管理工具，因此說使用它們的話你可能須要作更多的選擇，而這種方式則使得它們自己（React、Vue）的學習曲線相對平緩。

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

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

Vue 的特色

通過了那麼多的鋪墊，總算到了本次課程內容的重點：Vue，它到底有什麼魅力？爲何值得咱們花費時間去學習？先來看一下 Vue 到底擁有什麼樣的特色。

咱們會從如下8個方面來對 Vue 進行分析：

• MVVM 框架
• 單頁面應用程序
• 輕量化與易學習
• 漸進式與兼容性
• 視圖組件化
• 虛擬 DOM（Virtual DOM）
• 社區支持
• 將來的 Vue 走向

（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', {
    ...
});

這種方式來直接引入了。

（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 的做者爲國人尤雨溪），再加上 Vue 自己的強大，因此涌現出了特別多的國內社區，如 https://www.vue-js.com/、https://vuejs.com.cn/ 等。這種狀況在其餘的框架身上是沒有出現過的，這使得咱們在學習或者使用 Vue 的時候，能夠得到更多的幫助。

（8）將來 Vue 的走向

Vue 是由國人尤雨溪在 Google 工做的時候，爲了方便本身的工做而開發出來的一個庫，而在 Vue 被使用的過程當中，忽然發現愈來愈多的人喜歡上了它。因此尤雨溪就進入了一個邊工做、邊維護的狀態，在這種狀況下 Vue 依然迅速的發展。

而如今尤雨溪已經正式辭去了 Google 的工做，開始專職維護 Vue，同時加入進來的還有幾十位優秀的開發者，他們致力於把 Vue 打造爲最受歡迎的前端框架。事實證實 Vue 確實在往愈來愈好的方向發展了（從 Angular、React、Vue 的對比圖中能夠看出 Vue 的勢頭）。因此我以爲徹底不須要擔憂將來 Vue 的發展，至少在沒有新的顛覆性創新出來以前，Vue 都會越作越好。