一、要使用前端框架來構(gòu)建頁面的原因

因為提高開發(fā)效率，對于企業(yè)來說，時間就是效率，效率就是錢。

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

延伸閱讀：

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

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

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

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

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

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

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

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