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

因?yàn)樘岣唛_(kāi)發(fā)效率，對(duì)于企業(yè)來(lái)說(shuō)，時(shí)間就是效率，效率就是錢。

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

延伸閱讀：

二、前端框架到底解決了什么問(wèn)題

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

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

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

這套機(jī)制，才是前端框架真正替你省力的“臟活”，因?yàn)椴蝗绱?，你的組件根本集成不起來(lái)，“組件化開(kāi)發(fā)”、“數(shù)據(jù)驅(qū)動(dòng)”也就無(wú)從談起。至于框架對(duì)外提供的那些特性和語(yǔ)法糖，其實(shí)都見(jiàn)仁見(jiàn)智，有人喜歡有人不喜歡。但是我前面說(shuō)的那些臟活，才是一個(gè)框架之所以是一個(gè)框架的理由。

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

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

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