一篇文章讓你明白為什麼要學習Vue.js

一篇文章讓你明白為什麼要學習Vue.js

Vue.js是當今最流行的Javascript前端框架。Github上已經獲得了15萬以上的星星,可見大家都很關注這個框架。那麼,為什麼這個框架如此有吸引力,它的優點在哪裡?今天這篇文章將讓你明白為什麼要學習和使用Vue.js。

什麼是Vue.js

Vue.js是Evan You開發的JavaScript框架。 它是用於構建用戶界面的漸進式框架。 它著重於應用程序的視圖層,並用於構建單頁應用程序(SPA)。 這個框架就像AngularJS一樣,但是更快,更輕便。所謂漸進式框架的意思就是你可以根據項目的實際情況一步一步利用Vue.js提供的功能構建你的應用。Vue.js的核心思想就是小而靈活,不求全,只求精。

為什麼要學習和使用Vue.js

Vue.js與其他整體框架之間的主要區別在於,Vue.js從其創建開始就完全可以使用。 由於核心層僅集中在視圖層,因此Vue易於集成到我們的項目中。 這意味著我們不會為冗長的設置工作所困擾。 此外,Vue.js具備構建強大的單頁應用程序的能力。選擇它的原因可以歸結為以下幾個方面:

  • 學習門檻低

Vue.js包含經典的Web技術,並在它們之上構建。這與React陡峭的JSX(JavaScript + HTML文件)學習曲線相比,Vue.js使用基於HTML的模板和單文件組件,使開發人員可以編寫實際的CSS(並支持CSS模塊和預處理器)。在JavaScript庫之外執行此操作的好處是降低了複雜性,並且再次減小了構建大小。


一篇文章讓你明白為什麼要學習Vue.js

不同Javascript框架的學習曲線比較

  • 小巧靈活

Vue.js建立在最小的內核上,尤其是當你想要一個不會在代碼庫中增加大量體積的輕量級框架時。你可以在此基礎上根據需要進行最大程度地擴展 ,或僅使用所需的部分,並將這些部分直接與現有應用程序集成。該核心庫全都與“視圖”(MVC範例中的“ V”)有關,該視圖僅專注於應用程序或網站的用戶看到並與之交互的內容。

  • 性能優異

如今,每個熱門的新框架(React.js,Ember.js和現在的Vue.js)似乎都在整合虛擬DOM。那麼什麼是虛擬DOM?為什麼Vue通常更快?

儘管每個人都傾向於將DOM當作HTML文檔本身來討論,但實際上,它是瀏覽器解析HTML文檔時創建的數據結構。使用JavaScript對DOM進行更改的成本很高,因為瀏覽器必須分配資源以查找進行更改所需的DOM節點。現代的動態單頁Web應用程序(SPA)可以具有數千個節點,因此頻繁更新將不可避免地減慢頁面速度。


一篇文章讓你明白為什麼要學習Vue.js

虛擬DOM

虛擬DOM通過在JavaScript中提供DOM的完整表示來解決此問題,當真實DOM需要更改時,可以根據需要進行更新。更改JavaScript對象比更改DOM本身快速。當真實DOM與虛擬DOM同步時,它可以使更新變得更有效率,而不必每次更改都重新繪製整個DOM。

至於使Vue.js虛擬DOM“非常快”的原因在於運行時使用gzip算法壓縮並壓縮時只有20 kb,Vue.js明顯比其競爭對手更小(Ember 2.2.0和Angular 2大約111 kb)。另外,無需擔心的開箱即用代碼會大大減少優化工作。


一篇文章讓你明白為什麼要學習Vue.js

不同Javascript框架的性能比較

  • 支持服務器端渲染

Vue.js與大多數JavaScript框架一樣,在其中使用客戶端渲染(CSR),在這種情況下,瀏覽器在渲染網頁時會進行繁重的工作。但是,Vue.js還從React那裡學到了一項技能,那就是支持服務器端渲染(SSR),這使得應用在向用戶提供服務之前在服務器上預渲染頁面。

那麼為什麼要使用SSR?一個主要優點是服務器上呈現的內容無需等待所有JavaScript均已下載並執行即可顯示,從而大大減少了頁面加載時間。另一個主要優點是,對於搜索引擎爬蟲來說,完全渲染的頁面更易於閱讀,從而帶來更好的SEO(搜索引擎優化)。

  • 易於管理狀態

隨著你開始擴展應用程序,狀態管理變得越來越重要。對於基於組件的框架(例如Vue或React),尤其如此。應用程序中的多個組件正在共享數據並彼此交互。隨著這些交互的複雜性越來越大,將越來越難以理解或預測數據狀態,並且可能會出現錯誤。

Vuex是一個應用程序設計模式和庫,它從Flux,Redux和Elm Architecture汲取了靈感。在Vuex中,共享狀態是在一箇中央位置進行管理的,這是一個全局單例,它是Flux的“存儲”的代名詞。這允許組件樹充當一個大型“視圖”,任何組件都可以與之交互以訪問狀態或觸發動作,而無論在樹中的位置。組件可以從存儲中自由讀取數據,但不能直接更改數據。相反,它們通知存儲,存儲隨後使用稱為突變的Vuex函數更新狀態。

講了這麼多,總結一下就是Vue.js小巧靈活,性能優異,易於學習。在項目中,尤其是單頁面應用中,Vue.js將是你提高開發效率和應用性能的利器。歡迎對Vue.js有興趣的朋友在留言發表你的見解。


分享到:


相關文章: