一、要使用前端框架來構建頁面的原因

因為提高開發效率，對于企業來說，時間就是效率，效率就是錢。

在沒有前端框架之前，我們前端需要經常的操作DOM元素；在項目中，vue能夠簡化DOM操作，讓程序員根本不用操作任何DOM元素，就能渲染 頁面；企業中，使用框架，能夠提高開發的效率；提高開發效率的發展歷程：原生JS -> Jquery之類的類庫-> 前端模板引擎->Angular.js/Vue.js（能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數據綁定的概念【通過框架提供的指令，我們前端程序員只需要關心數據的業務邏輯，不再關心DOM是如何渲染的了】）在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯；增強自己就業時候的競爭力基礎JS基本功，JS高級，PHP，Jquery，H5C3+移動Web提高Nodejs，前端三大框架，React-Native（使用前端的技術HTML+CSS+JS，去開發手機App）

延伸閱讀：

二、前端框架到底解決了什么問題

框架其實就解決了一個問題——使用聲明式語法，描述組件對象的嵌套關系，并自動生成與dom對象的對應關系。

自己敲過框架輪子的人一定明白我在說什么——你在自己寫框架的時候，最難處理的不是數據驅動，observable庫有的是，也不是事件監聽，那玩意兒jquery已經做的很好了，更不是模板語法，誰還寫不出個模板轉render的函數？真正有點麻煩的問題是：

dom對象以及他們的從屬（同時是傳遞關系）關系，是通過html自動生成的，然而當你把“組件”抽象為js對象，你怎么能實現子組件的自動創建，自動銷毀，自動數據傳遞，自動render，自動事件監聽（不一定是dom事件）？怎么把js組件對象存在它應該在的地方（我的標題圖截得是preact源碼解決這個問題的部分，preact的子組件實例，是存在dom節點上的），并且rerender的時候能把js組件對象和dom節點對應起來？什么時候需要new，什么時候復用原來的組件？組件重渲染之后，怎么commit到dom上？

這套機制，才是前端框架真正替你省力的“臟活”，因為不如此，你的組件根本集成不起來，“組件化開發”、“數據驅動”也就無從談起。至于框架對外提供的那些特性和語法糖，其實都見仁見智，有人喜歡有人不喜歡。但是我前面說的那些臟活，才是一個框架之所以是一個框架的理由。

關于這套機制，類angular框架和類react框架分別講了兩個故事——

angular講的故事是“模板編譯為能精細感知model變化事件的dom-commiter”。react講的故事是“model怎么變不重要，我只要model當前狀態，我有辦法給你patch到dom上”。

表面上看起來是很不一樣的，但是本質上都是做同一件事——你在模板里面也好，jsx里面也好，使用組件時寫的的都是組件的類型，然而實際render的時候，框架幫你自動創建了組件實例。第二次render的時候，框架又幫你做了兩件事，名列前茅件事是，幫你找到應被復用的組件實例，指揮他重新render一遍，第二件事是，幫你把render的結果commit到正確dom節點上。