剛工作那會，前端都是用HTML+CSS+JS來寫的,現在各種前端框架層出不窮，基本都是引入前端框架來構建前端，為什么？
一、什么是框架
框架是一個可復用的設計構件，它規定了應用的體系結構，闡明了整個設計、協作構件之間的依賴關系、責任分配和控制流程，表現為一組抽象類以及其實例之間協作的方法，框架的關鍵還在於框架內對象間的交互模式和控制流模式。應用框架強調的是軟件的設計重用性和系統的可擴充性,以縮短大型應用軟件系統的開發周期，提高開發質量。框架其實就是某種應用的半成品，就是一組組件，供你選用完成你自己的系統。簡單說就是使用別人搭好的舞台，你來做表演。而且，框架一般是成熟的，不斷升級的軟件。
前端框架也是框架，是框架更具體的分類，是隨着前端功能的增強而產生的，對於往應用方向發展（也就是越來越像客戶端）的web產品就很必要做前端架構這件事，它開始以模型為中心，DOM操作只是附加，通過關注點分離鼓勵改進應用程序。未來的發展趨勢是前后端只靠json數據進行通信，后端只處理和發送一段json到前端，計算和模板渲染都在前端進行，后台程序不再做模板的任何處理。有效實現前后端的解耦，簡化開發流程，便於維護管理，可以把精力更多放到業務邏輯，提升開發效率。
二、前端框架的特點：
1.聲明式& 數據驅動渲染
React提供的JSX和Vue提供的模板目的是為了實現聲明式渲染的功能。不論是JSX，或者是Vue中的模板，本質上都是描述了『狀態』與『視圖』之間的映射關系。所以聲明式渲染是框架的特性。聲明了映射關系之后，可以得到一個公式：
UI =render(state)
狀態與視圖之間的映射關系，等同於render函數。JSX與Vue的模板在這一點上是相同的。在框架的內部，不論是JSX還是Vue的模板，最終會編譯成render函數。上面這個公式，輸入的是state，輸出的是DOM。所以輸入變了輸出就變了，這個特性就是我們常說的數據驅動視圖。
這里會引出一個問題，框架必須要知道Web應用在運行時”狀態“是否發生了變化，然后才能使用前面提到的公式重新輸出一個新的UI。所以如何知道Web應用的狀態在運行時是否發生了變化這個問題是所有框架必須去解決的。解決方案有很多種。不同框架，或者同一個框架的不同版本對這個問題的解決方案都不同，但相同的是都可以解決問題。
2. 組件化
現代主流框架都具備的一個特性是“組件”，它們都會以“組件”作為一個基本的抽象單元。可能不同的框架，它所提供的操控組件的方式不一樣，但概念上是相似的。
之前聽過一次尤雨溪的知乎Live，他將實際應用中的組件分為四種類型並依次介紹了四種組件之間的區別：
（1）展示型組件：展示型組件是最直接也是最常用的組件，就是用數據渲染視圖，“數據進，DOM出”。
（2）接入型組件：接入型組件通常會跟接入數據的service層打交道。包含一些和服務器或數據源打交道的邏輯，然后接入型組件會將數據往下傳，傳給比較簡單的展示型組件。在React中這種類型的組件被稱為“容器組件（containercomponent）”。
（3）交互型組件：交互型組件典型的例子是對表單組件的封裝和增強。大部分組件庫，像ElementUI都是以交互型組件為主。這一類組件會有比較復雜的交互邏輯，但是它是一個非常通用的邏輯，所以它強調復用。
（4）功能型組件：功能型組件是比較抽象的組件。用Vue舉例，路由的<router-view>和Vue自帶的<transition>都屬於功能型組件。它本身不渲染任何內容，它是一個邏輯型的組件。它通常作為一個擴展或一種抽象機制存在。
不同框架操控組件的方式可能不一樣，但使用組件的“心法”永遠是一樣的。這就是關注特性帶來的好處，你可以切換到任意一個框架，使用組件或封裝組件時，總是上面列出的幾種類型。掌握了“心法”的程序員在切換框架時，他的狀態通常是這樣的：我現在想寫一個交互型組件，這個框架都提供了哪些API？去翻翻文檔看一下。然后就可以寫出一個很優雅的組件出來，哪怕剛使用這個框架才不到一天。如果沒有掌握“心法”，用了一個框架寫出的代碼很糟糕，那么換了一個框架也不會寫出更好的代碼，甚至更糟糕。
3.路由
在前端框架中都是前端路由，可以保證性能和用戶體驗的層面來比較的話，后端路由每次訪問一個新頁面的時候都要向服務器發送請求，然后服務器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對於用戶體驗來說會有相當大的提升。 在某些場合中，用ajax請求，可以讓頁面無刷新，頁面變了但Url沒有變化，用戶就不能復制到想要的地址，用前端路由做單頁面網頁就很好的解決了這個問題。
4.良好周邊以及社區
一個框架的成長必然離不開別人的輔助升級。不斷吸收新的想法使得框架走的會越來越好。
5、其他特性
前面詳細介紹了幾個個特性給大家感受下為什么要重視特性。框架的特性太多，而且不同的框架都會有不同的特性，不能每一個都詳細介紹，下面列出一些大家比較熟悉的通用特性：
（1）狀態和數據流管理
（2）CLI工具
（3）同構/服務端渲染
（4）CSS管理方案
三、總結
為什么使用前端框架，不再從零用HTML、CSS和JS寫頁面，主要是提高開發效率。既然叫框架，我們就可以引人該框架（舞台），我們只需要在上邊跳舞即可，沒必要自己在搭建舞台了。前端框架三巨頭React、Angular和 Vue，雖然都很受歡迎，且保持着上升趨勢，但Vue 爆發力最強，但在使用率上，仍低於React。我構建前端項目用的是Vue.js，Vue的整體思想是擁抱經典的Web 技術，並在其上進行擴展，之前HTML、CSS、JS也比較熟。