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


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

那么,他真的值得這么高的評價嘛?

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

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

 

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

為什么會有框架

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

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

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

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

目前的主流框架

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

Angular、React、Vue

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

Angular、React 和 Vue 的 GitHub Star 歷史:

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

 

npm 的下載趨勢圖:

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

 

可以看到在 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,就像下面這樣:

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

 

那么這個 MVVM 框架,應該怎么去理解呢?它的第一個 View,相當於頁面中的 DOM,最后一個 Model 相當於數據源,就像下面這個樣子:

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

 

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

Vue 正是使用了這種 MVVM 的框架形式,並且通過聲明式渲染和響應式數據綁定的方式來幫助我們完全避免了對 DOM 的操作。

2.單頁面應用程序

單頁面應用程序(SPA),一般指為:一個頁面就是一個應用(或子應用)。隨着技術的發展,現在的前端網頁早已不只局限於在瀏覽器上展示了,手機 App 上、微信公眾號上都有了越來越多的展示機會。

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

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

 

等的花兒都謝了 有沒有?

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

3.輕量化與易學習

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

我們為什么選擇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 允許通過組件來去拼裝一個頁面,每個組件都是一個可復用的 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 本身的強大,所以涌現出了特別多的國內社區,如www.vue-js.com、vuejs.com.cn等。這種情況在其他的框架身上是沒有出現過的,這使得我們在學習或者使用 Vue 的時候,可以獲得更多的幫助。

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

 

8.Vue的未來走向

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

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

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

原.前端小王子


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM