南順網絡

前端三大框架解析，Angular、React、Vue

現在前端界有三大框架橫行，Vue，React，Angular，幾乎是所有身為(wèi)一(yī)名前端工程師所必備的(de)一(yī)項技能。

但是我不知道(dào)有多少人仔細思考過為(wèi)什麽會這樣？

現在的(de)一(yī)些應屆生和(hé)剛入行的(de)人們，在剛一(yī)踏入前端這個行業起就會面臨着是學(xué)習Vue還是學(xué)習React又或者是學(xué)習Angular等這樣的(de)選擇問題。

事實上在早幾年(nián)是沒有這個問題的(de)，我們不需要選擇，那時候我們寫前端就是jQuery一(yī)把梭，就是幹，幹就完了。

那為(wèi)什麽現在人們需要選擇各種框架了呢(ne)？

其實之所以現在我們需要選擇框架，本質上是因為(wèi)我們面臨的(de)需求變了。大家肯定都明白如(rú)果我們隻寫一(yī)個純展示信息的(de)頁面，沒有任何交互功能的(de)頁面，其實即便是現在，我們也是不需要選擇框架的(de)，我們隻需要寫幾行CSS和(hé)HTML就可(kě)以完成任務。

所以是因為(wèi)我們面臨的(de)需求變得複雜了，我們的(de)應用經常需要在運行時做(zuò)一(yī)些交互。

這裏面有三個很重要的(de)字我标了粗體，叫做(zuò)運行時（Runtime）。現代的(de)前端開發，我們開發的(de)應用經常需要在運行時來做(zuò)一(yī)些交互，這些交互在早期隻是個幻燈片或者Tab切換下拉菜單等一(yī)些簡單的(de)交互，這些交互用jQuery實現完全沒什麽問題。但現代的(de)前端我們的(de)目标是用Web去(qù)PK原生應用，去(qù)和(hé)Native進行PK。

那這個時候我們會發現用jQuery來開發應用，我們的(de)代碼變得很難以維護，那為(wèi)什麽使用現代框架比如(rú)Vue，React等就變得容易維護了呢(ne)？

我們可(kě)以想一(yī)下，我們用jQuery去(qù)操作DOM的(de)目的(de)是什麽？是為(wèi)了局部更新視(shì)圖，換句話說是為(wèi)了局部重新渲染。

jQuery是命令式的(de)操作DOM，命令式的(de)局部更新視(shì)圖，而現代主流框架Vue，React，Angular等都是聲明式的(de)，聲明式的(de)局部更新視(shì)圖。

為(wèi)什麽聲明式的(de)操作DOM就可(kě)以讓應用變得好維護了呢(ne)？

弄明白這個問題首先我們先簡單介紹下什麽是命令式，什麽是聲明式。

命令式

聲明式是通過描述狀态與視(shì)圖之間的(de)映射關系，然後通過這樣的(de)一(yī)個映射關系來操作DOM，或者說具體點是用這樣的(de)映射關系來生成一(yī)個DOM節點插入到頁面去(qù)。比如(rú)Vue中的(de)模闆。模闆的(de)作用就用是來描述狀态與DOM的(de)映射關系。

同樣的(de)場景，我們用Vue中的(de)模闆來實現，當我們用模闆描述了映射關系之後，我們在點擊按鈕時，我們隻需要對顔色這個變量進行修改就可(kě)以完成需求。

看到區别了麽？

仔細思考下，用Vue來實現同樣的(de)需求，如(rú)果細分來看，我們在邏輯上隻有一(yī)個行為(wèi)，隻有狀态。而jQuery是兩個行為(wèi)，狀态+DOM操作。

所以聲明式為(wèi)什麽可(kě)以簡化維護應用代碼的(de)複雜度？

因為(wèi)它讓我們可(kě)以把關注點隻放在狀态的(de)維護上。這樣一(yī)來當應用複雜後，其實我們的(de)思維，我們管理(lǐ)代碼的(de)方式隻在狀态上，所有的(de)DOM操作都不用關心了，可(kě)以說大大降低(dī)代碼維護的(de)複雜度。

我們不再需要關注怎麽操作DOM，因為(wèi)框架會幫我們自(zì)動去(qù)做(zuò)，我們隻關注狀态就好了。

編輯:--ns868