什么是框架

　　框架（Framework）是整個(gè)或部分系統(tǒng)的可重用設(shè)計(jì)鄙信，表現(xiàn)為一組抽象構(gòu)件及構(gòu)件實(shí)例間交互的方法;另一種定義認(rèn)為蹈丸，框架是可被應(yīng)用開(kāi)發(fā)者定制的應(yīng)用骨架。前者是從應(yīng)用方面而后者是從目的方面給出的定義玻墅。

　　可以說(shuō)介牙，一個(gè)框架是一個(gè)可復(fù)用的設(shè)計(jì)構(gòu)件，它規(guī)定了應(yīng)用的體系結(jié)構(gòu)澳厢，闡明了整個(gè)設(shè)計(jì)环础、協(xié)作構(gòu)件之間的依賴關(guān)系、責(zé)任分配和控制流程剩拢，表現(xiàn)為一組抽象類(lèi)以及其實(shí)例之間協(xié)作的方法喳整，它為構(gòu)件復(fù)用提供了上下文(Context)關(guān)系掉冶。因此構(gòu)件庫(kù)的大規(guī)模重用也需要框架提陶。

　　構(gòu)件領(lǐng)域框架方法在很大程度上借鑒了硬件技術(shù)發(fā)展的成就叶骨，它是構(gòu)件技術(shù)、軟件體系結(jié)構(gòu)研究和應(yīng)用軟件開(kāi)發(fā)三者發(fā)展結(jié)合的產(chǎn)物呵晨。在很多情況下，框架通常以構(gòu)件庫(kù)的形式出現(xiàn)熬尺，但構(gòu)件庫(kù)只是框架的一個(gè)重要部分摸屠。框架的關(guān)鍵還在于框架內(nèi)對(duì)象間的交互模式和控制流模式粱哼。

　　框架比構(gòu)件可定制性強(qiáng)季二。在某種程度上，將構(gòu)件和框架看成兩個(gè)不同但彼此協(xié)作的技術(shù)或許更好揭措】柘希框架為構(gòu)件提供重用的環(huán)境，為構(gòu)件處理錯(cuò)誤绊含、交換數(shù)據(jù)及激活操作提供了標(biāo)準(zhǔn)的方法桑嘶。

　　應(yīng)用框架的概念也很簡(jiǎn)單。它并不是包含構(gòu)件應(yīng)用程序的小片程序躬充，而是實(shí)現(xiàn)了某應(yīng)用領(lǐng)域通用完備功能（除去特殊應(yīng)用的部分）的底層服務(wù)逃顶。使用這種框架的編程人員可以在一個(gè)通用功能已經(jīng)實(shí)現(xiàn)的基礎(chǔ)上開(kāi)始具體的系統(tǒng)開(kāi)發(fā)讨便。框架提供了所有應(yīng)用期望的默認(rèn)行為的類(lèi)集合以政。具體的應(yīng)用通過(guò)重寫(xiě)子類(lèi)(該子類(lèi)屬于框架的默認(rèn)行為)或組裝對(duì)象來(lái)支持應(yīng)用專用的行為霸褒。

　　應(yīng)用框架強(qiáng)調(diào)的是軟件的設(shè)計(jì)重用性和系統(tǒng)的可擴(kuò)充性,以縮短大型應(yīng)用軟件系統(tǒng)的開(kāi)發(fā)周期，提高開(kāi)發(fā)質(zhì)量盈蛮。與傳統(tǒng)的基于類(lèi)庫(kù)的面向?qū)ο笾赜眉夹g(shù)比較废菱，應(yīng)用框架更注重于面向?qū)I(yè)領(lǐng)域的軟件重用。應(yīng)用框架具有領(lǐng)域相關(guān)性眉反，構(gòu)件根據(jù)框架進(jìn)行復(fù)合而生成可運(yùn)行的系統(tǒng)昙啄。框架的粒度越大寸五，其中包含的領(lǐng)域知識(shí)就更加完整梳凛。

　　框架，即framework梳杏。其實(shí)就是某種應(yīng)用的半成品韧拒，就是一組組件，供你選用完成你自己的系統(tǒng)十性。簡(jiǎn)單說(shuō)就是使用別人搭好的舞臺(tái)叛溢，你來(lái)做表演。而且劲适，框架一般是成熟的楷掉，不斷升級(jí)的軟件∠际疲框架的概念最早起源于Smalltalk環(huán)境烹植，其中最著名的框架是Smalltalk80的用戶界面框架MVC(Model-View-Controller)。隨著用戶界面框架Interviews【Linton89】和ET++【W(wǎng)einand 89】的開(kāi)發(fā)和發(fā)布愕贡，框架研究越來(lái)越受到研究人員的重視草雕。

　　雖然框架研究最初起源于用戶界面領(lǐng)域，但它還被成功地應(yīng)用到其他領(lǐng)域中固以，如操作系統(tǒng)墩虹、火警系統(tǒng)等。Taligent公司于1992年成立后憨琳，框架研究受到了廣泛的重視诫钓。該公司計(jì)劃基于框架來(lái)開(kāi)發(fā)一個(gè)完整的面向?qū)ο蟛僮飨到y(tǒng)。另外栽渴，該公司還發(fā)布了一套支持快速應(yīng)用開(kāi)發(fā)的工具集CommonPoint尖坤，其中包括了上百個(gè)面向?qū)ο罂蚣堋続ndert 94,Cotter 95】∠胁粒框架還沒(méi)有統(tǒng)一的定義慢味，其中RalphJohnson所給出的定義基本上為大多數(shù)研究人員所接受：

　　一個(gè)框架是一個(gè)可復(fù)用設(shè)計(jì)场梆，它是由一組抽象類(lèi)及其實(shí)例間協(xié)作關(guān)系來(lái)表達(dá)的。

　　這個(gè)定義是從框架內(nèi)涵的角度來(lái)定義框架的纯路，當(dāng)然也可以從框架用途的角度來(lái)給出框架的定義：

　　一個(gè)框架是在一個(gè)給定的問(wèn)題領(lǐng)域內(nèi)或油，一個(gè)應(yīng)用程序的一部分設(shè)計(jì)與實(shí)現(xiàn)。

　　從以上兩個(gè)定義可以看出驰唬，框架是對(duì)特定應(yīng)用領(lǐng)域中的應(yīng)用系統(tǒng)的部分設(shè)計(jì)和實(shí)現(xiàn)的整體結(jié)構(gòu)顶岸。框架將應(yīng)用系統(tǒng)劃分為類(lèi)和對(duì)象叫编，定義類(lèi)和對(duì)象的責(zé)任辖佣，類(lèi)和對(duì)象如何互相協(xié)作，以及對(duì)象之間的控制線程搓逾。這些共有的設(shè)計(jì)因素由框架預(yù)先定義卷谈，應(yīng)用開(kāi)發(fā)人員只須關(guān)注于特定的應(yīng)用系統(tǒng)特有部分∠即郏框架刻畫(huà)了其應(yīng)用領(lǐng)域所共有的設(shè)計(jì)決策世蔗，所以說(shuō)框架著重于設(shè)計(jì)復(fù)用，盡管框架中可能包含用某種程序設(shè)計(jì)語(yǔ)言實(shí)現(xiàn)的具體類(lèi)朗兵。

　　一個(gè)基于框架開(kāi)發(fā)的應(yīng)用系統(tǒng)包含一個(gè)或多個(gè)框架污淋，與框架相關(guān)的構(gòu)件類(lèi)，以及與應(yīng)用系統(tǒng)相關(guān)的功能擴(kuò)展余掖。與應(yīng)用系統(tǒng)相關(guān)的擴(kuò)展包括與應(yīng)用系統(tǒng)相關(guān)的類(lèi)和對(duì)象寸爆。應(yīng)用系統(tǒng)可能僅僅復(fù)用了面向?qū)ο罂蚣艿囊徊糠郑蛘哒f(shuō)盐欺，它可能需要對(duì)框架進(jìn)行一些適應(yīng)性修改而昨，以滿足系統(tǒng)需求。

　　面向?qū)ο蟮目蚣茏鳛橐环N可復(fù)用的軟件找田，在基于框架的軟件開(kāi)發(fā)過(guò)程中會(huì)涉及到框架的開(kāi)發(fā)和利用兩個(gè)方面的工作∽藕框架的開(kāi)發(fā)階段在于產(chǎn)生領(lǐng)域中可復(fù)用的設(shè)計(jì)墩衙。該階段的主要結(jié)果是框架以及與框架相關(guān)的構(gòu)件類(lèi)。該階段的一個(gè)重要活動(dòng)是框架的演變和維護(hù)甲抖。像所有軟件一樣漆改，框架也易于變化。產(chǎn)生變化的原因很多准谚，如應(yīng)用出錯(cuò)挫剑，業(yè)務(wù)領(lǐng)域變化，等等柱衔。

　　不論是哪一種技術(shù)樊破，最終都是為業(yè)務(wù)發(fā)展而服務(wù)的愉棱。從業(yè)務(wù)的角度來(lái)講。首先哲戚，框架的是為了企業(yè)的業(yè)務(wù)發(fā)展和戰(zhàn)略規(guī)劃而服務(wù)的奔滑，他服從于企業(yè)的愿景；其次顺少，框架最重要的目標(biāo)是提高企業(yè)的競(jìng)爭(zhēng)能力朋其，包括降低成本、提高質(zhì)量脆炎、改善客戶滿意程度梅猿，控制進(jìn)度等方面。最后秒裕，框架實(shí)現(xiàn)這一目標(biāo)的方式是進(jìn)行有效的知識(shí)積累袱蚓。軟件開(kāi)發(fā)是一種知識(shí)活動(dòng)，因此知識(shí)的聚集和積累是至關(guān)重要的簇爆●桑框架能夠采用一種結(jié)構(gòu)化的方式對(duì)某個(gè)特定的業(yè)務(wù)領(lǐng)域進(jìn)行描述，也就是將這個(gè)領(lǐng)域相關(guān)的技術(shù)以代碼入蛆、文檔响蓉、模型等方式固化下來(lái)。

　　以上是框架的廣義概念哨毁。接下來(lái)說(shuō)說(shuō)前端框架枫甲。

　　前端框架

　　前端框架也是框架，是框架更具體的分類(lèi)扼褪，是提供一套解決方案想幻，你得按我的規(guī)定來(lái)安排代碼結(jié)構(gòu)，它是隨著前端功能的增強(qiáng)而產(chǎn)生的话浇，對(duì)于往應(yīng)用方向發(fā)展（也就是越來(lái)越像客戶端）的web產(chǎn)品就很必要做前端架構(gòu)這件事脏毯，它開(kāi)始以模型為中心，DOM操作只是附加幔崖，通過(guò)關(guān)注點(diǎn)分離鼓勵(lì)改進(jìn)應(yīng)用程序食店。

　　未來(lái)的發(fā)展趨勢(shì)是前后端只靠json數(shù)據(jù)進(jìn)行通信，后端只處理和發(fā)送一段json到前端赏寇，計(jì)算和模板渲染都在前端進(jìn)行吉嫩，后臺(tái)程序不再做模板的任何處理。使用MV*框架能有效實(shí)現(xiàn)前后端的解耦嗅定，簡(jiǎn)化開(kāi)發(fā)流程自娩，便于維護(hù)管理，可以把精力更多放到業(yè)務(wù)邏輯渠退，提升開(kāi)發(fā)效率忙迁。

　　所以考慮是否需要引入前端框架脐彩，可以根據(jù)產(chǎn)品類(lèi)型做個(gè)基本判斷：對(duì)于頁(yè)面型產(chǎn)品，處理交互更多动漾，jquery也夠用丁屎；但如果是應(yīng)用軟件類(lèi)產(chǎn)品，需要關(guān)注處理復(fù)雜模型旱眯，很有必要引入MV*框架晨川。如今的互聯(lián)網(wǎng)公司的產(chǎn)品基本都是webapp，越來(lái)越像傳統(tǒng)應(yīng)用軟件開(kāi)發(fā)靠攏删豺，使用個(gè)框架就還是很有必要的共虑。

　　前端框架的特點(diǎn)：

　　1.聲明式& 數(shù)據(jù)驅(qū)動(dòng)渲染

　　更深一步思考，React提供的JSX和Vue提供的模板呀页，它們的目的是什么妈拌？目的是為了實(shí)現(xiàn)聲明式渲染的功能。不論是JSX蓬蝶，或者是Vue中的模板尘分，本質(zhì)上都是描述了『狀態(tài)』與『視圖』之間的映射關(guān)系。

　　所以聲明式渲染是框架的特性丸氛。

　　聲明了映射關(guān)系之后培愁，可以得到一個(gè)公式：

　　UI =render(state)

　　狀態(tài)與視圖之間的映射關(guān)系，等同于render函數(shù)缓窜。熟悉React的同學(xué)對(duì)這個(gè)公式應(yīng)該并不陌生定续。JSX與Vue的模板在這一點(diǎn)上是相同的。在框架的內(nèi)部禾锤，不論是JSX還是Vue的模板私股，最終會(huì)編譯成render函數(shù)。

　　上面這個(gè)公式恩掷，輸入的是state倡鲸，輸出的是DOM。所以輸入變了輸出就變了黄娘。

　　這個(gè)特性就是我們常說(shuō)的數(shù)據(jù)驅(qū)動(dòng)視圖旦签。

　　這里會(huì)引出一個(gè)問(wèn)題，框架必須要知道Web應(yīng)用在運(yùn)行時(shí)”狀態(tài)“是否發(fā)生了變化寸宏，然后才能使用前面提到的公式重新輸出一個(gè)新的UI。所以如何知道Web應(yīng)用的狀態(tài)在運(yùn)行時(shí)是否發(fā)生了變化這個(gè)問(wèn)題是所有框架必須去解決的偿曙。

　　解決方案有很多種氮凝。不同框架，或者同一個(gè)框架的不同版本對(duì)這個(gè)問(wèn)題的解決方案都不同望忆，但相同的是都可以解決問(wèn)題罩阵。關(guān)于這個(gè)問(wèn)題如何解決竿秆，我在曾在我的文章、分享的PPT以及目前還未上市的書(shū)中都有詳細(xì)的介紹稿壁。這個(gè)問(wèn)題不是本文所討論的重點(diǎn)幽钢，感興趣的同學(xué)可以點(diǎn)擊這里了解更多信息。

　　不同的解決方案傅是，導(dǎo)致的直接結(jié)果就是它所提供給用戶的上層語(yǔ)法或API完全不一樣匪燕。

　　2. 組件化

　　現(xiàn)代主流框架都具備的一個(gè)特性是“組件”，它們都會(huì)以“組件”作為一個(gè)基本的抽象單元喧笔。

　　可能不同的框架帽驯，它所提供的操控組件的方式不一樣，但概念上是相似的书闸。

　　之前聽(tīng)過(guò)一次尤雨溪的知乎Live尼变，他將實(shí)際應(yīng)用中的組件分為四種類(lèi)型并依次介紹了四種組件之間的區(qū)別：

　　展示型組件

　　展示型組件是最直接也是最常用的組件，就是用數(shù)據(jù)渲染視圖浆劲，“數(shù)據(jù)進(jìn)嫌术，DOM出”。

　　接入型組件

　　接入型組件通常會(huì)跟接入數(shù)據(jù)的service層打交道牌借。包含一些和服務(wù)器或數(shù)據(jù)源打交道的邏輯度气，然后接入型組件會(huì)將數(shù)據(jù)往下傳，傳給比較簡(jiǎn)單的展示型組件走哺。在React中這種類(lèi)型的組件被稱為“容器組件（containercomponent）”蚯嫌。

　　交互型組件

　　交互型組件典型的例子是對(duì)表單組件的封裝和增強(qiáng)。大部分組件庫(kù)丙躏，像ElementUI都是以交互型組件為主择示。這一類(lèi)組件會(huì)有比較復(fù)雜的交互邏輯，但是它是一個(gè)非常通用的邏輯晒旅，所以它強(qiáng)調(diào)復(fù)用栅盲。

　　功能型組件

　　功能型組件是比較抽象的組件。用Vue舉例废恋，路由的<router-view>和Vue自帶的<transition>都屬于功能型組件谈秫。它本身不渲染任何內(nèi)容，它是一個(gè)邏輯型的組件鱼鼓。它通常作為一個(gè)擴(kuò)展或一種抽象機(jī)制存在拟烫。

　　不同框架操控組件的方式可能不一樣，但使用組件的“心法”永遠(yuǎn)是一樣的迄本。這就是關(guān)注特性帶來(lái)的好處硕淑，你可以切換到任意一個(gè)框架，使用組件或封裝組件時(shí)，總是上面列出的幾種類(lèi)型置媳。

　　掌握了“心法”的程序員在切換框架時(shí)于樟，他的狀態(tài)通常是這樣的：我現(xiàn)在想寫(xiě)一個(gè)交互型組件，這個(gè)框架都提供了哪些API拇囊？去翻翻文檔看一下迂曲。然后就可以寫(xiě)出一個(gè)很優(yōu)雅的組件出來(lái)，哪怕剛使用這個(gè)框架才不到一天寥袭。

　　如果沒(méi)有掌握“心法”路捧，用了一個(gè)框架寫(xiě)出的代碼很糟糕，那么換了一個(gè)框架也不會(huì)寫(xiě)出更好的代碼纠永，甚至更糟糕鬓长。。

　　3.路由

　　在前端框架中都是前端路由尝江，可以保證性能和用戶體驗(yàn)的層面來(lái)比較的話涉波，后端路由每次訪問(wèn)一個(gè)新頁(yè)面的時(shí)候都要向服務(wù)器發(fā)送請(qǐng)求，然后服務(wù)器再響應(yīng)請(qǐng)求炭序，這個(gè)過(guò)程肯定會(huì)有延遲啤覆。而前端路由在訪問(wèn)一個(gè)新頁(yè)面的時(shí)候僅僅是變換了一下路徑而已，沒(méi)有了網(wǎng)絡(luò)延遲惭聂，對(duì)于用戶體驗(yàn)來(lái)說(shuō)會(huì)有相當(dāng)大的提升窗声。

　　在某些場(chǎng)合中，用ajax請(qǐng)求辜纲，可以讓頁(yè)面無(wú)刷新笨觅，頁(yè)面變了但Url沒(méi)有變化，用戶就不能復(fù)制到想要的地址耕腾，用前端路由做單頁(yè)面網(wǎng)頁(yè)就很好的解決了這個(gè)問(wèn)題见剩。

　　4.良好周邊以及社區(qū)

　　一個(gè)框架的成長(zhǎng)必然離不開(kāi)別人的輔助升級(jí)。不斷吸收新的想法使得框架走的會(huì)越來(lái)越好扫俺。

　　5.其他特點(diǎn)

　　前面詳細(xì)介紹了幾個(gè)個(gè)特性給大家感受下為什么要重視特性苍苞。框架的特性太多狼纬，而且不同的框架都會(huì)有不同的特性羹呵，不能每一個(gè)都詳細(xì)介紹，下面列出一些大家比較熟悉的通用特性：

　　狀態(tài)和數(shù)據(jù)流管理

　　CLI工具

　　同構(gòu)/服務(wù)端渲染

　　CSS管理方案

　　前端框架對(duì)比

　　框架的使用情況

　　這個(gè)是2018年github中各大前端框架的Star數(shù)量疗琉，Vue是最受歡迎的明星項(xiàng)目冈欢。

　　下面看一下三大框架的下載量：

　　Vue在過(guò)去的一年中穩(wěn)超Angular，稱為下載量第二的框架盈简。這個(gè)是npm包下載統(tǒng)計(jì)凑耻。以上的數(shù)據(jù)是全球互聯(lián)網(wǎng)公司的數(shù)據(jù)（畢竟我們的Vue有一部分犯戏，路轉(zhuǎn)粉到cnpm那里去了）

　　前端框架三巨頭React、Angular和 Vue拳话，雖然都很受歡迎，且保持著上升趨勢(shì)种吸，但Vue 爆發(fā)力最強(qiáng)弃衍，但在使用率上，仍低于React坚俗。

　　在中國(guó)大廠中Vue的使用普及率是高于React镜盯。

　　三大框架差別

　　對(duì)比React：

　　React和 Vue有許多相似之處，它們都有：

　　使用Virtual DOM

　　提供了響應(yīng)式(Reactive) 和組件化(Composable) 的視圖組件猖败。

　　將注意力集中保持在核心庫(kù)速缆，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。

　　由于有著眾多的相似處恩闻，我們會(huì)用更多的時(shí)間在這一塊進(jìn)行比較艺糜。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時(shí)也兼顧了平衡的考量幢尚。我們需要承認(rèn)React 比 Vue更好的地方破停，比如更豐富的生態(tài)系統(tǒng)。

　　React社區(qū)為我們準(zhǔn)確進(jìn)行平衡的考量提供了非常積極的幫助尉剩，特別感謝來(lái)自React 團(tuán)隊(duì)的Dan Abramov 真慢。他非常慷慨的花費(fèi)時(shí)間來(lái)貢獻(xiàn)專業(yè)知識(shí)來(lái)幫助我們完善這篇文檔理茎。

　　運(yùn)行時(shí)性能：

　　React和 Vue都是非澈诮纾快的，所以速度并不是在它們之中做選擇的決定性因素皂林。對(duì)于具體的數(shù)據(jù)表現(xiàn)朗鸠，可以移步這個(gè)第三方benchmark，它專注于渲染/更新非常簡(jiǎn)單的組件樹(shù)的真實(shí)性能式撼。

　　優(yōu)化：

　　在React 應(yīng)用中童社，當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí)，它會(huì)以該組件為根著隆，重新渲染整個(gè)組件子樹(shù)扰楼。

　　如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用PureComponent美浦，或是手動(dòng)實(shí)現(xiàn)shouldComponentUpdate方法弦赖。同時(shí)你可能會(huì)需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來(lái)使得你的組件更容易被優(yōu)化。

　　然而浦辨，使用PureComponent 和shouldComponentUpdate 時(shí)蹬竖，需要保證該組件的整個(gè)子樹(shù)的渲染輸出都是由該組件的props 所決定的。如果不符合這個(gè)情況，那么此類(lèi)優(yōu)化就會(huì)導(dǎo)致難以察覺(jué)的渲染結(jié)果不一致币厕。這使得React 中的組件優(yōu)化伴隨著相當(dāng)?shù)男闹秦?fù)擔(dān)列另。

　　在Vue應(yīng)用中，組件的依賴是在渲染過(guò)程中自動(dòng)追蹤的旦装，所以系統(tǒng)能精確知曉哪個(gè)組件確實(shí)需要被重渲染页衙。你可以理解為每一個(gè)組件都已經(jīng)自動(dòng)獲得了shouldComponentUpdate，并且沒(méi)有上述的子樹(shù)問(wèn)題限制阴绢。

　　Vue的這個(gè)特點(diǎn)使得開(kāi)發(fā)者不再需要考慮此類(lèi)優(yōu)化店乐，從而能夠更好地專注于應(yīng)用本身。

　　HTML& CSS：

　　在React 中呻袭，一切都是JavaScript眨八。不僅僅是HTML 可以用JSX 來(lái)表達(dá)，現(xiàn)在的潮流也越來(lái)越多地將CSS 也納入到JavaScript 中來(lái)處理左电。這類(lèi)方案有其優(yōu)點(diǎn)廉侧，但也存在一些不是每個(gè)開(kāi)發(fā)者都能接受的取舍。

　　Vue的整體思想是擁抱經(jīng)典的Web 技術(shù)券腔，并在其上進(jìn)行擴(kuò)展伏穆。我們下面會(huì)詳細(xì)分析一下。

　　JSXvs Templates：

　　在React 中纷纫，所有的組件的渲染功能都依靠JSX枕扫。JSX是使用 XML語(yǔ)法編寫(xiě) JavaScript的一種語(yǔ)法糖。

　　JSX說(shuō)是手寫(xiě)的渲染函數(shù)有下面這些優(yōu)勢(shì)：

　　你可以使用完整的編程語(yǔ)言JavaScript 功能來(lái)構(gòu)建你的視圖頁(yè)面辱魁。比如你可以使用臨時(shí)變量烟瞧、JS自帶的流程控制、以及直接引用當(dāng)前JS 作用域中的值等等染簇。

　　開(kāi)發(fā)工具對(duì)JSX 的支持相比于現(xiàn)有可用的其他Vue 模板還是比較先進(jìn)的(比如参滴，linting、類(lèi)型檢查锻弓、編輯器的自動(dòng)完成)砾赔。

　　事實(shí)上Vue 也提供了渲染函數(shù)，甚至支持JSX青灼。然而暴心，我們默認(rèn)推薦的還是模板。任何合乎規(guī)范的HTML 都是合法的Vue 模板杂拨，這也帶來(lái)了一些特有的優(yōu)勢(shì)：

　　對(duì)于很多習(xí)慣了HTML 的開(kāi)發(fā)者來(lái)說(shuō)专普，模板比起JSX讀寫(xiě)起來(lái)更自然。這里當(dāng)然有主觀偏好的成分弹沽，但如果這種區(qū)別會(huì)導(dǎo)致開(kāi)發(fā)效率的提升檀夹，那么它就有客觀的價(jià)值存在筋粗。

　　基于HTML 的模板使得將已有的應(yīng)用逐步遷移到Vue 更為容易。

　　這也使得設(shè)計(jì)師和新人開(kāi)發(fā)者更容易理解和參與到項(xiàng)目中炸渡。

　　你甚至可以使用其他模板預(yù)處理器娜亿，比如Pug 來(lái)書(shū)寫(xiě)Vue 的模板。

　　有些開(kāi)發(fā)者認(rèn)為模板意味著需要學(xué)習(xí)額外的DSL (Domain-Specific Language 領(lǐng)域特定語(yǔ)言)才能進(jìn)行開(kāi)發(fā)——我們認(rèn)為這種區(qū)別是比較膚淺的蚌堵。首先暇唾，JSX并不是免費(fèi)的——它是基于JS 之上的一套額外語(yǔ)法，因此也有它自己的學(xué)習(xí)成本辰斋。同時(shí)，正如同熟悉JS 的人學(xué)習(xí)JSX 會(huì)很容易一樣瘸味，熟悉HTML 的人學(xué)習(xí)Vue 的模板語(yǔ)法也是很容易的宫仗。最后，DSL的存在使得我們可以讓開(kāi)發(fā)者用更少的代碼做更多的事旁仿，比如v-on 的各種修飾符藕夫，在JSX 中實(shí)現(xiàn)對(duì)應(yīng)的功能會(huì)需要多得多的代碼。

　　更抽象一點(diǎn)來(lái)看枯冈，我們可以把組件區(qū)分為兩類(lèi)：一類(lèi)是偏視圖表現(xiàn)的(presentational)毅贮，一類(lèi)則是偏邏輯的(logical)。我們推薦在前者中使用模板尘奏，在后者中使用JSX或渲染函數(shù)滩褥。這兩類(lèi)組件的比例會(huì)根據(jù)應(yīng)用類(lèi)型的不同有所變化，但整體來(lái)說(shuō)我們發(fā)現(xiàn)表現(xiàn)類(lèi)的組件遠(yuǎn)遠(yuǎn)多于邏輯類(lèi)組件炫加。

　　組件作用域內(nèi)的CSS：

　　除非你把組件分布在多個(gè)文件上(例如 CSSModules)瑰煎，CSS作用域在 React中是通過(guò) CSS-in-JS的方案實(shí)現(xiàn)的 (比如styled-components、glamorous和emotion)俗孝。這引入了一個(gè)新的面向組件的樣式范例酒甸，它和普通的CSS 撰寫(xiě)過(guò)程是有區(qū)別的。另外赋铝，雖然在構(gòu)建時(shí)將CSS 提取到一個(gè)單獨(dú)的樣式表是支持的插勤，但bundle 里通常還是需要一個(gè)運(yùn)行時(shí)程序來(lái)讓這些樣式生效。當(dāng)你能夠利用JavaScript 靈活處理樣式的同時(shí)革骨，也需要權(quán)衡bundle 的尺寸和運(yùn)行時(shí)的開(kāi)銷(xiāo)农尖。

　　如果你是一個(gè)CSS-in-JS 的愛(ài)好者，許多主流的CSS-in-JS 庫(kù)也都支持Vue (比如styled-components-vue 和vue-emotion)苛蒲。這里React 和 Vue主要的區(qū)別是卤橄，Vue設(shè)置樣式的默認(rèn)方法是單文件組件里類(lèi)似style 的標(biāo)簽。

　　單文件組件讓你可以在同一個(gè)文件里完全控制CSS臂外，將其作為組件代碼的一部分窟扑。

　　<stylescoped>

　　@media (min-width: 250px) {

　　.list-container:hover {

　　background: orange;

　　}

　　}

　　</style>

　　這個(gè)可選scoped 屬性會(huì)自動(dòng)添加一個(gè)唯一的屬性(比如data-v-21e5b78) 為組件內(nèi)CSS 指定作用域喇颁，編譯的時(shí)候.list-container:hover 會(huì)被編譯成類(lèi)似.list-container[data-v-21e5b78]:hover。

　　最后嚎货，Vue的單文件組件里的樣式設(shè)置是非常靈活的橘霎。通過(guò)vue-loader，你可以使用任意預(yù)處理器殖属、后處理器姐叁，甚至深度集成CSS Modules——全部都在<style> 標(biāo)簽內(nèi)。

　　規(guī)模

　　向上擴(kuò)展

　　Vue和 React都提供了強(qiáng)大的路由來(lái)應(yīng)對(duì)大型應(yīng)用洗显。React社區(qū)在狀態(tài)管理方面非常有創(chuàng)新精神(比如Flux外潜、Redux)，而這些狀態(tài)管理模式甚至Redux 本身也可以非常容易的集成在Vue 應(yīng)用中挠唆。實(shí)際上处窥，Vue更進(jìn)一步地采用了這種模式(Vuex)，更加深入集成Vue 的狀態(tài)管理解決方案Vuex 相信能為你帶來(lái)更好的開(kāi)發(fā)體驗(yàn)玄组。

　　兩者另一個(gè)重要差異是滔驾，Vue的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方維護(hù)支持且與核心庫(kù)同步更新的。React則是選擇把這些問(wèn)題交給社區(qū)維護(hù)俄讹，因此創(chuàng)建了一個(gè)更分散的生態(tài)系統(tǒng)哆致。但相對(duì)的，React的生態(tài)系統(tǒng)相比 Vue更加繁榮患膛。

　　最后摊阀，Vue提供了 Vue-cli腳手架，能讓你非常容易地構(gòu)建項(xiàng)目踪蹬，包含了Webpack驹溃，Browserify，甚至no build system延曙。React在這方面也提供了create-react-app豌鹤，但是現(xiàn)在還存在一些局限性：

　　它不允許在項(xiàng)目生成時(shí)進(jìn)行任何配置，而Vue 支持Yeoman-like 定制枝缔。

　　它只提供一個(gè)構(gòu)建單頁(yè)面應(yīng)用的單一模板布疙，而Vue 提供了各種用途的模板。

　　它不能用用戶自建的模板構(gòu)建項(xiàng)目愿卸，而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的灵临。

　　而要注意的是這些限制是故意設(shè)計(jì)的，這有它的優(yōu)勢(shì)趴荸。例如儒溉，如果你的項(xiàng)目需求非常簡(jiǎn)單，你就不需要自定義生成過(guò)程发钝。你能把它作為一個(gè)依賴來(lái)更新顿涣。如果閱讀更多關(guān)于不同的設(shè)計(jì)理念波闹。

　　向下擴(kuò)展

　　React學(xué)習(xí)曲線陡峭，在你開(kāi)始學(xué)React 前涛碑，你需要知道JSX 和ES2015精堕，因?yàn)樵S多示例用的是這些語(yǔ)法。你需要學(xué)習(xí)構(gòu)建系統(tǒng)蒲障，雖然你在技術(shù)上可以用Babel 來(lái)實(shí)時(shí)編譯代碼歹篓，但是這并不推薦用于生產(chǎn)環(huán)境。

　　就像Vue 向上擴(kuò)展好比React 一樣揉阎，Vue向下擴(kuò)展后就類(lèi)似于jQuery庄撮。你只要把如下標(biāo)簽放到頁(yè)面就可以運(yùn)行：

https://cdn.jsdelivr.net/npm/vue">

　　然后你就可以編寫(xiě)Vue 代碼并應(yīng)用到生產(chǎn)中，你只要用min 版 Vue文件替換掉就不用擔(dān)心其他的性能問(wèn)題毙籽。

　　由于起步階段不需學(xué)JSX重窟，ES2015以及構(gòu)建系統(tǒng)，所以開(kāi)發(fā)者只需不到一天的時(shí)間閱讀指南就可以建立簡(jiǎn)單的應(yīng)用程序惧财。

　　原生渲染

　　ReactNative 能使你用相同的組件模型編寫(xiě)有本地渲染能力的APP (iOS 和Android)。能同時(shí)跨多平臺(tái)開(kāi)發(fā)扭仁，對(duì)開(kāi)發(fā)者是非常棒的垮衷。相應(yīng)地，Vue和 Weex會(huì)進(jìn)行官方合作乖坠，Weex是阿里巴巴發(fā)起的跨平臺(tái)用戶界面開(kāi)發(fā)框架搀突，同時(shí)也正在Apache 基金會(huì)進(jìn)行項(xiàng)目孵化，Weex允許你使用 Vue語(yǔ)法開(kāi)發(fā)不僅僅可以運(yùn)行在瀏覽器端熊泵，還能被用于開(kāi)發(fā)iOS 和 Android上的原生應(yīng)用的組件仰迁。

　　在現(xiàn)在，Weex還在積極發(fā)展顽分，成熟度也不能和React Native 相抗衡徐许。但是，Weex的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動(dòng)卒蘸，Vue團(tuán)隊(duì)也會(huì)和 Weex團(tuán)隊(duì)積極合作確保為開(kāi)發(fā)者帶來(lái)良好的開(kāi)發(fā)體驗(yàn)雌隅。

　　Angular事實(shí)上必須用 TypeScript來(lái)開(kāi)發(fā)，因?yàn)樗奈臋n和學(xué)習(xí)資源幾乎全部是面向TS 的缸沃。TS有很多好處——靜態(tài)類(lèi)型檢查在大規(guī)模的應(yīng)用中非常有用恰起，同時(shí)對(duì)于Java 和 C#背景的開(kāi)發(fā)者也是非常提升開(kāi)發(fā)效率的。

　　然而趾牧，并不是所有人都想用TS——在中小型規(guī)模的項(xiàng)目中检盼，引入TS 可能并不會(huì)帶來(lái)太多明顯的優(yōu)勢(shì)。在這些情況下翘单，用Vue 會(huì)是更好的選擇吨枉，因?yàn)樵诓挥肨S 的情況下使用Angular 會(huì)很有挑戰(zhàn)性蹦渣。

　　最后，雖然Vue 和 TS的整合可能不如 Angular那么深入东羹，我們也提供了官方的類(lèi)型聲明 和 組件裝飾器剂桥，并且知道有大量用戶在生產(chǎn)環(huán)境中使用Vue + TS 的組合。我們也和微軟的TS / VSCode 團(tuán)隊(duì)進(jìn)行著積極的合作属提，目標(biāo)是為Vue + TS 用戶提供更好的類(lèi)型檢查和IDE 開(kāi)發(fā)體驗(yàn)权逗。

　　運(yùn)行時(shí)性能

　　這兩個(gè)框架都很快，有非常類(lèi)似的benchmark 數(shù)據(jù)冤议。你可以瀏覽具體的數(shù)據(jù)做更細(xì)粒度的對(duì)比斟薇，不過(guò)速度應(yīng)該不是決定性的因素。

　　體積

　　在體積方面恕酸，最近的Angular 版本中在使用了AOT 和tree-shaking 技術(shù)后使得最終的代碼體積減小了許多堪滨。但即使如此，一個(gè)包含了Vuex + Vue Router 的Vue 項(xiàng)目 (gzip之后 30kB)相比使用了這些優(yōu)化的angular-cli 生成的默認(rèn)項(xiàng)目尺寸(~130kB) 還是要小得多蕊温。

　　靈活性

　　Vue相比于 Angular更加靈活袱箱，Vue官方提供了構(gòu)建工具來(lái)協(xié)助你構(gòu)建項(xiàng)目，但它并不限制你去如何組織你的應(yīng)用代碼义矛。有人可能喜歡有嚴(yán)格的代碼組織規(guī)范发笔，但也有開(kāi)發(fā)者喜歡更靈活自由的方式。

　　學(xué)習(xí)曲線

　　要學(xué)習(xí)Vue凉翻，你只需要有良好的HTML 和JavaScript 基礎(chǔ)了讨。有了這些基本的技能，你就可以非持坪洌快速地通過(guò)閱讀指南 投入開(kāi)發(fā)前计。

　　Angular的學(xué)習(xí)曲線是非常陡峭的——作為一個(gè)框架，它的API 面積比起Vue 要大得多垃杖，你也因此需要理解更多的概念才能開(kāi)始有效率地工作男杈。當(dāng)然，Angular本身的復(fù)雜度是因?yàn)樗脑O(shè)計(jì)目標(biāo)就是只針對(duì)大型的復(fù)雜應(yīng)用调俘；但不可否認(rèn)的是势就，這也使得它對(duì)于經(jīng)驗(yàn)不甚豐富的開(kāi)發(fā)者相當(dāng)?shù)牟挥押谩?/p>