前端必學(xué)框架角度分析Vue技巧【渡一教育】

1、什么是框架框架(Framework )是整個(gè)或部分系統(tǒng)的可重用設(shè)計(jì)，表現(xiàn)為一組抽象構(gòu)件及構(gòu)件實(shí)例間交互的方法;另一種定義認(rèn)為，框架是可被應(yīng)用開發(fā)者定制的應(yīng)用骨架。前者是從應(yīng)用方面而后者是從目的方面給出的定義?？梢哉f，一個(gè)框架是一個(gè)可復(fù)用的設(shè)計(jì)構(gòu)件，它規(guī)定了應(yīng)用的體系結(jié)構(gòu)，闡明了整個(gè)設(shè)計(jì)、協(xié)作構(gòu)件 之間的依賴關(guān)系、責(zé)任分配和控制流程，表現(xiàn)為一組抽象類以及其實(shí)例之間協(xié)作的方法，它為構(gòu)件復(fù) 用提供了上下文(Context)關(guān)系。因此構(gòu)件庫的大規(guī)模重用也需要框架。構(gòu)件領(lǐng)域框架方法在很大程度上借鑒了硬件技術(shù)發(fā)展的成就，它是構(gòu)件技術(shù)、軟件體系結(jié)構(gòu)研究和應(yīng)用軟件開發(fā)三者發(fā)展結(jié)合的產(chǎn)物。在很多情況下，框架通常

2、以構(gòu)件庫的形式出現(xiàn)，但構(gòu)件庫只是框架 的一個(gè)重要部分?？蚣艿年P(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)用框架的概念也很簡單。它并不是包含構(gòu)件應(yīng)用程序的小片程序，而是實(shí)現(xiàn)了某應(yīng)用領(lǐng)域通用完備 功能(除去特殊應(yīng)用的部分)的底層服務(wù)。使用這種框架的編程人員可以在一個(gè)通用功能已經(jīng)實(shí)現(xiàn)的基礎(chǔ)上開始具體的系統(tǒng)開發(fā)?？蚣芴峁┝怂袘?yīng)用期望的默認(rèn)行為的類集合。具體的應(yīng)用通過重寫子類(該子類屬于框架的默認(rèn)行為)或組裝對(duì)象來支持應(yīng)用專用的行為。

3、應(yīng)用框架強(qiáng)調(diào)的是軟件的設(shè)計(jì)重用性和系統(tǒng)的可擴(kuò)充性，以縮短大型應(yīng)用軟件系統(tǒng)的開發(fā)周期，提高 開發(fā)質(zhì)量。與傳統(tǒng)的基于類庫的面向?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)。簡單說就是使用別人搭好的舞臺(tái)，你來做表演。而且，框架一般是成熟的，不斷升級(jí)的軟件?？蚣艿母拍钭钤缙鹪从赟malltalk環(huán)境，其中最著名的框架是 Smalltalk80的用戶界面框架MVC(Model-Vie

4、w-Controller)。隨著用戶界面框架 Interviews【Linton89 】和 ET+【W(wǎng)einand 89 】的開發(fā)和發(fā)布，框架研究越來越受到研究人員的重視。雖然框架研究最初起源于用戶界面領(lǐng)域，但它還被成功地應(yīng)用到其他領(lǐng)域中，如操作系統(tǒng)、火警系統(tǒng)等。Taligent公司于1992年成立后，框架研究受到了廣泛的重視。該公司計(jì)劃基于框架來開發(fā)一個(gè) 完整的面向?qū)ο蟛僮飨到y(tǒng)。另外，該公司還發(fā)布了一套支持快速應(yīng)用開發(fā)的工具集CommonPoint ,其中包括了上百個(gè)面向?qū)ο罂蚣堋続ndert 94,Cotter 95。框架還沒有統(tǒng)一的定義，其中 RalphJohnson 所給出的定義基本上

5、為大多數(shù)研究人員所接受：一個(gè)框架是一個(gè)可復(fù)用設(shè)計(jì)，它是由一組抽象類及其實(shí)例間協(xié)作關(guān)系來表達(dá)的。這個(gè)定義是從框架內(nèi)涵的角度來定義框架的，當(dāng)然也可以從框架用途的角度來給出框架的定義：一個(gè)框架是在一個(gè)給定的問題領(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)劃分為類和對(duì)象，定義類和對(duì)象的責(zé)任，類和對(duì)象如何互相協(xié)作，以及對(duì)象之間的控制線程。這些共有的設(shè)計(jì)因素由框架預(yù)先定義，應(yīng)用開發(fā)人員只須關(guān)注于特定的應(yīng)用系統(tǒng)特有部分?？蚣芸坍嬃似鋺?yīng)用領(lǐng)域所共有的設(shè)計(jì)決策，所以說框架著重于設(shè)計(jì)復(fù)用，盡管框架中可能包含用某種程序 設(shè)

6、計(jì)語言實(shí)現(xiàn)的具體類。一個(gè)基于框架開發(fā)的應(yīng)用系統(tǒng)包含一個(gè)或多個(gè)框架，與框架相關(guān)的構(gòu)件類，以及與應(yīng)用系統(tǒng)相關(guān)的功能擴(kuò)展。與應(yīng)用系統(tǒng)相關(guān)的擴(kuò)展包括與應(yīng)用系統(tǒng)相關(guān)的類和對(duì)象。應(yīng)用系統(tǒng)可能僅僅復(fù)用了面向?qū)ο罂蚣艿囊徊糠?，或者說，它可能需要對(duì)框架進(jìn)行一些適應(yīng)性修改，以滿足系統(tǒng)需求。面向?qū)ο蟮目蚣茏鳛橐环N可復(fù)用的軟件，在基于框架的軟件開發(fā)過程中會(huì)涉及到框架的開發(fā)和利用兩個(gè)方面的工作?？蚣艿拈_發(fā)階段在于產(chǎn)生領(lǐng)域中可復(fù)用的設(shè)計(jì)。該階段的主要結(jié)果是框架以及與框架相關(guān)的構(gòu)件類。該階段的一個(gè)重要活動(dòng)是框架的演變和維護(hù)。像所有軟件一樣，框架也易于變化。產(chǎn)生變化的原因很多，如應(yīng)用出錯(cuò)，業(yè)務(wù)領(lǐng)域變化，等等。不論是哪一種技術(shù)

7、，最終都是為業(yè)務(wù)發(fā)展而服務(wù)的。從業(yè)務(wù)的角度來講。首先，框架的是為了企業(yè)的業(yè)務(wù)發(fā)展和戰(zhàn)略規(guī)劃而服務(wù)的，他服從于企業(yè)的愿景；其次，框架最重要的目標(biāo)是提高企業(yè)的競爭能力，包括降低成本、提高質(zhì)量、改善客戶滿意程度，控制進(jìn)度等方面。最后，框架實(shí)現(xiàn)這一目標(biāo)的方式是進(jìn)行有效的知識(shí)積累。軟件開發(fā)是一種知識(shí)活動(dòng)，因此知識(shí)的聚集和積累是至關(guān)重要的?？蚣苣軌虿捎靡环N結(jié)構(gòu)化的方式對(duì)某個(gè)特定的業(yè)務(wù)領(lǐng)域進(jìn)行描述，也就是將這個(gè)領(lǐng)域相關(guān)的技術(shù)以代碼、文檔、模型等方式固化下來。以上是框架的廣義概念。接下來說說前端框架。前端框架前端框架也是框架，是框架更具體的分類，是提供一套解決方案，你得按我的規(guī)定來安排代碼結(jié)構(gòu)，它是隨著前端功

8、能的增強(qiáng)而產(chǎn)生的，對(duì)于往應(yīng)用方向發(fā)展（也就是越來越像客戶端）的 web產(chǎn)品就 很必要做前端架構(gòu)這件事，它開始以模型為中心，DOM操作只是附加，通過關(guān)注點(diǎn)分離鼓勵(lì)改進(jìn)應(yīng)用程序。未來的發(fā)展趨勢(shì)是前后端只靠json數(shù)據(jù)進(jìn)行通信，后端只處理和發(fā)送一段json到前端，計(jì)算和模板 渲染都在前端進(jìn)行，后臺(tái)程序不再做模板的任何處理。使用 MV*框架能有效實(shí)現(xiàn)前后端的解耦，簡 化開發(fā)流程，便于維護(hù)管理，可以把精力更多放到業(yè)務(wù)邏輯，提升開發(fā)效率。所以考慮是否需要引入前端框架，可以根據(jù)產(chǎn)品類型做個(gè)基本判斷：對(duì)于頁面型產(chǎn)品，處理交互更多， jquery也夠用；但如果是應(yīng)用軟件類產(chǎn)品，需要關(guān)注處理復(fù)雜模型，很有必要引入

9、 MV*框架。如今 的互聯(lián)網(wǎng)公司的產(chǎn)品基本都是 webapp ,越來越像傳統(tǒng)應(yīng)用軟件開發(fā)靠攏，使用個(gè)框架就還是很有必 要的。前端框架的特點(diǎn)：.聲明式&數(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)部

10、，不論是 JSX還是Vue的模板，最終會(huì)編譯成 render 函數(shù)。上面這個(gè)公式，輸入的是 state ,輸出的是DOM。所以輸入變了輸出就變了。這個(gè)特性就是我們常說的數(shù)據(jù)驅(qū)動(dòng)視圖這里會(huì)引出一個(gè)問題，框架必須要知道 Web應(yīng)用在運(yùn)行時(shí)”狀態(tài)“是否發(fā)生了變化，然后才能使用前面提到的公式重新輸出一個(gè)新的 UI。所以如何知道 Web應(yīng)用的狀態(tài)在運(yùn)行時(shí)是否發(fā)生了變化這個(gè) 問題是所有框架必須去解決的。解決方案有很多種。不同框架，或者同一個(gè)框架的不同版本對(duì)這個(gè)問題的解決方案都不同，但相同的是都可以解決問題。關(guān)于這個(gè)問題如何解決，我在曾在我的文章、分享的PPT以及目前還未上市的書中都有詳細(xì)的介紹。這個(gè)問題不

11、是本文所討論的重點(diǎn)，感興趣的同學(xué)可以點(diǎn)擊這里了解更多信息。不同的解決方案，導(dǎo)致的直接結(jié)果就是它所提供給用戶的上層語法或API完全不一樣。.組件化現(xiàn)代主流框架都具備的一個(gè)特性是“組件”，它們都會(huì)以“組件”作為一個(gè)基本的抽象單元?？赡懿煌目蚣?，它所提供的操控組件的方式不一樣，但概念上是相似的。之前聽過一次尤雨溪的知乎 Live ,他將實(shí)際應(yīng)用中的組件分為四種類型并依次介紹了四種組件之間的 區(qū)別：?展示型組件展示型組件是最直接也是最常用的組件，就是用數(shù)據(jù)渲染視圖，“數(shù)據(jù)進(jìn)，DOM出”。?接入型組件接入型組件通常會(huì)跟接入數(shù)據(jù)的service層打交道。包含一些和服務(wù)器或數(shù)據(jù)源打交道的邏輯，然后接入型組

12、件會(huì)將數(shù)據(jù)往下傳，傳給比較簡單的展示型組件。 在React中這種類型的組件被稱為 “容器組件(containercomponent )”。? 交互型組件交互型組件典型的例子是對(duì)表單組件的封裝和增強(qiáng)。大部分組件庫，像 ElementUI都是以交互型組 件為主。這一類組件會(huì)有比較復(fù)雜的交互邏輯，但是它是一個(gè)非常通用的邏輯，所以它強(qiáng)調(diào)復(fù)用。? 功能型組件功能型組件是比較抽象的組件。用 Vue舉例，路由的 和Vue自帶的transition 都屬于功能型組件。它本身不渲染任何內(nèi)容，它是一個(gè)邏輯型的組件。它通常作為一個(gè)擴(kuò)展或一種抽象機(jī)制存在。不同框架操控組件的方式可能不一樣，但使用組件的“心法”永遠(yuǎn)是一

13、樣的。這就是關(guān)注特性帶來的好處，你可以切換到任意一個(gè)框架，使用組件或封裝組件時(shí)，總是上面列出的幾種類型。掌握了 “心法”的程序員在切換框架時(shí)，他的狀態(tài)通常是這樣的：我現(xiàn)在想寫一個(gè)交互型組件，這個(gè)框架都提彳了哪些API ?去翻翻文檔看一下。然后就可以寫出一個(gè)很優(yōu)雅的組件出來，哪怕剛使用這 個(gè)框架才不到一天。如果沒有掌握“心法”，用了一個(gè)框架寫出的代碼很糟糕， 那么換了一個(gè)框架也不會(huì)寫出更好的代碼， 甚至更糟糕。.路由在前端框架中都是前端路由，可以保證性能和用戶體驗(yàn)的層面來比較的話，后端路由每次訪問一個(gè)新 頁面的時(shí)候都要向服務(wù)器發(fā)送請(qǐng)求，然后服務(wù)器再響應(yīng)請(qǐng)求，這個(gè)過程肯定會(huì)有延遲。而前端路由在訪問

14、一個(gè)新頁面的時(shí)候僅僅是變換了一下路徑而已，沒有了網(wǎng)絡(luò)延遲，對(duì)于用戶體驗(yàn)來說會(huì)有相當(dāng)大的提升。在某些場合中，用ajax請(qǐng)求，可以讓頁面無刷新，頁面變了但Url沒有變化，用戶就不能復(fù)制到想要的地址，用前端路由做單頁面網(wǎng)頁就很好的解決了這個(gè)問題。.良好周邊以及社區(qū)一個(gè)框架的成長必然離不開別人的輔助升級(jí)。不斷吸收新的想法使得框架走的會(huì)越來越好。.其他特點(diǎn)前面詳細(xì)介紹了幾個(gè)個(gè)特性給大家感受下為什么要重視特性?？蚣艿奶匦蕴?，而且不同的框架都會(huì)有不同的特性，不能每一個(gè)都詳細(xì)介紹，下面列出一些大家比較熟悉的通用特性：狀態(tài)和數(shù)據(jù)流管理CLI工具同構(gòu)/服務(wù)端渲染CSS管理方案前端框架對(duì)比框架的使用情況Vue.j

15、 s0? e jq 二廠二廣：二. 匚 二tdliV-adoptabieM53kJavaScript.Reactffk沼nt, and flexible JavaScript libraryY tor+34.2k buildiAngularOne frameworkH2 4kIMavScript i-iisrrimeV；orIe krde :larRtive vjeb a.十76kmid vaNervd reduxNext eneratson wet framorkuir：,g ;velj components witn 口Preact+4,8kbasedp kghtweight and el

16、m-st vie fra me work. T iWmrst 3kB React alteinative with the same modern API C44.2kCompA blEznig fast Reect alternative, compaiible ?,Tcth. IE& and React L6+35kHSveltehe magical disappearing UI framework+3.0kStancilscd Coirponert compTor budding fast, reusable UI compo+28k MithrilA Javascript riame

17、work far Building 3nliiant AppiicatiQus而 Errberhrr.5er.js - A JavaScript frameivorlc for cr？anc anibitiQus wet a+L8k這個(gè)是2018年github中各大前端框架的 Star數(shù)量，Vue是最受歡迎的明星項(xiàng)目在2018年Vijs若加了 45 3k個(gè)片菰在GitHub前謂喳桀分類中排名 第k -TweetVue在過去的一年中穩(wěn)超 Angular ,稱為下載量第二的框架。這個(gè)是 npm包下載統(tǒng)計(jì)。以上的數(shù)據(jù)是全球互聯(lián)網(wǎng)公司的數(shù)據(jù)（畢竟我們的 Vue有一部分，路轉(zhuǎn)粉到cnpm那里去了）3,既

18、3.9k2.9kF面看一下三大框架的下載量:Downtoatis rn past 1 Year?. 7k g.Sk 3與上 2.8kGitHub Statsstars 由forks issues angularjs59S3028660如react11947521637540vue1245551781820 B前端框架三巨頭React、Angular和Vue,雖然都很受歡迎，且保持著上升趨勢(shì)，但 Vue爆發(fā)力最強(qiáng)，但在使用率上，仍低于 React o在中國大廠中Vue的使用普及率是高于React。三大框架差別對(duì)比React :React和Vue有許多相似之處，它們都有：使用 Virtual DO

19、M提供了響應(yīng)式(Reactive)和組件化(Composable) 的視圖組件。將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。由于有著眾多的相似處，我們會(huì)用更多的時(shí)間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時(shí)也兼顧了平衡的考量。我們需要承認(rèn)React比Vue更好的地方，比如更豐富的生態(tài)系統(tǒng)。React團(tuán)隊(duì)的DanAbramovReact社區(qū)為我們準(zhǔn)確進(jìn)行平衡的考量提供了非常積極的幫助，特別感謝來自他非?？犊幕ㄙM(fèi)時(shí)間來貢獻(xiàn)專業(yè)知識(shí)來幫助我們完善這篇文檔運(yùn)行時(shí)性能:React和Vue都是非?？斓模运俣炔⒉皇窃谒鼈冎凶鲞x擇的決定性因素。對(duì)于具體的數(shù)據(jù)表

20、現(xiàn)，可以移步這個(gè)第三方 benchmark ,它專注于渲染/更新非常簡單的組件樹的真實(shí)性能。優(yōu)化：在React應(yīng)用中，當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí)，它會(huì)以該組件為根，重新渲染整個(gè)組件子樹。如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 PureComponent ,或是手動(dòng)實(shí)現(xiàn) shouldComponentUpdate 方法。同時(shí)你可能會(huì)需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來使得你的組件更容易 被優(yōu)化。然而，使用PureComponent 和shouldComponentUpdate 時(shí)，需要保證該組件的整個(gè)子樹的渲染輸出都是由該組件的props所決定的。如果不符合這個(gè)情況，那么此類優(yōu)化就會(huì)導(dǎo)

21、致難以察覺的渲染結(jié)果不一致。這使得 React中的組件優(yōu)化伴隨著相當(dāng)?shù)男闹秦?fù)擔(dān)。在Vue應(yīng)用中，組件的依賴是在渲染過程中自動(dòng)追蹤的，所以系統(tǒng)能精確知曉哪個(gè)組件確實(shí)需要被重渲染。你可以理解為每一個(gè)組件都已經(jīng)自動(dòng)獲得了shouldComponentUpdate ,并且沒有上述的子樹問題限制。Vue的這個(gè)特點(diǎn)使得開發(fā)者不再需要考慮此類優(yōu)化，從而能夠更好地專注于應(yīng)用本身。HTML& CSS :在React中，一切都是JavaScript。不僅僅是HTML可以用JSX來表達(dá)，現(xiàn)在的潮流也越來越多 地將CSS也納入到JavaScript中來處理。這類方案有其優(yōu)點(diǎn)，但也存在一些不是每個(gè)開發(fā)者都能接 受的取舍

22、Vue的整體思想是擁抱經(jīng)典的 Web技術(shù)，并在其上進(jìn)行擴(kuò)展。我們下面會(huì)詳細(xì)分析一下。JSXvs Templates在React中，所有的組件的渲染功能都依靠JSX。JSX是使用XML語法編寫JavaScript的一種語法糖。JSX說是手寫的渲染函數(shù)有下面這些優(yōu)勢(shì)：你可以使用完整的編程語言 JavaScript功能來構(gòu)建你的視圖頁面。比如你可以使用臨時(shí)變量、JS自帶的流程控制、以及直接引用當(dāng)前 JS作用域中的值等等。開發(fā)工具對(duì)JSX的支持相比于現(xiàn)有可用的其他 Vue模板還是比較先進(jìn)的（比如，linting 、類型檢查、 編輯器的自動(dòng)完成）。事實(shí)上Vue也提供了渲染函數(shù)，甚至支持 JSXo然而，我

23、們默認(rèn)推薦的還是模板。任何合乎規(guī)范的 HTML都是合法的Vue模板，這也帶來了一些特有的優(yōu)勢(shì)：對(duì)于很多習(xí)慣了 HTML的開發(fā)者來說，模板比起JSX讀寫起來更自然。這里當(dāng)然有主觀偏好的成分， 但如果這種區(qū)別會(huì)導(dǎo)致開發(fā)效率的提升，那么它就有客觀的價(jià)值存在。基于HTML的模板使得將已有的應(yīng)用逐步遷移到 Vue更為容易。這也使得設(shè)計(jì)師和新人開發(fā)者更容易理解和參與到項(xiàng)目中。你甚至可以使用其他模板預(yù)處理器，比如Pug來書寫Vue的模板。有些開發(fā)者認(rèn)為模板意味著需要學(xué)習(xí)額外的DSL （Domain-Specific Language領(lǐng)域特定語言）才能進(jìn)行開發(fā)一一我們認(rèn)為這種區(qū)別是比較膚淺的。首先，JSX并不

24、是免費(fèi)的一一它是基于 JS之上的一套額外語法，因此也有它自己的學(xué)習(xí)成本。同時(shí)，正如同熟悉 JS的人學(xué)習(xí)JSX會(huì)很容易一樣，熟悉HTML的人學(xué)習(xí)Vue的模板語法也是很容易的。最后，DSL的存在使得我們可以讓開發(fā)者用更少的代碼做更多的事，比如 v-on的各種修飾符，在JSX中實(shí)現(xiàn)對(duì)應(yīng)的功能會(huì)需要多得多的代碼。更抽象一點(diǎn)來看，我們可以把組件區(qū)分為兩類：一類是偏視圖表現(xiàn)的(presentational), 一類則是偏邏輯的(logical) o我們推薦在前者中使用模板，在后者中使用JSX或渲染函數(shù)。這兩類組件的比例會(huì)根據(jù)應(yīng)用類型的不同有所變化，但整體來說我們發(fā)現(xiàn)表現(xiàn)類的組件遠(yuǎn)遠(yuǎn)多于邏輯類組件。組件作用

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

26、支持Vue (比如styled-components-vue 和 vue-emotion)。這里 React 和 Vue 主要的區(qū)別是，Vue 設(shè)置樣式的默認(rèn)方法是單文件組件里類似 style的標(biāo)簽。單文件組件讓你可以在同一個(gè)文件里完全控制CSS,將其作為組件代碼的一部分。media (min-width: 250px) .list-container:hover background: orange;這個(gè)可選scoped 屬性會(huì)自動(dòng)添加一個(gè)唯一的屬性（比如data-v-21e5b78）為組件內(nèi)CSS指定作用域，編譯的時(shí)候.list-container:hover會(huì)被編譯成類似.list-co

27、ntainerdata-v-21e5b78:hover。最后，Vue的單文件組件里的樣式設(shè)置是非常靈活的。通過 vue-loader ,你可以使用任意預(yù)處理器、 后處理器，甚至深度集成 CSS Modules 全部都在標(biāo)簽內(nèi)。規(guī)模向上擴(kuò)展Vue和React都提供了強(qiáng)大的路由來應(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相信 能為你帶來更好的開發(fā)體驗(yàn)。兩者另一個(gè)重要差異是，V

28、ue的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持且與核心庫同步更新的。React則是選擇把這些問題交給社區(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īng)用的單一模板，而Vue提供了各種用途的模板。它不能用用戶自

29、建的模板構(gòu)建項(xiàng)目，而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的。而要注意的是這些限制是故意設(shè)計(jì)的，這有它的優(yōu)勢(shì)。例如，如果你的項(xiàng)目需求非常簡單，你就不需 要自定義生成過程。你能把它作為一個(gè)依賴來更新。如果閱讀更多關(guān)于不同的設(shè)計(jì)理念。向下擴(kuò)展React學(xué)習(xí)曲線陡峭，在你開始學(xué)React前，你需要知道JSX和ES2015 ,因?yàn)樵S多示例用的是這 些語法。你需要學(xué)習(xí)構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用Babel來實(shí)時(shí)編譯代碼，但是這并不推薦用于生產(chǎn)環(huán)境。就像Vue向上擴(kuò)展好比React 一樣，Vue向下擴(kuò)展后就類似于jQuery。你只要把如下標(biāo)簽放到頁 面就可以運(yùn)行：然后你就可以編寫Vue代碼并應(yīng)用到生產(chǎn)中，你只要用min版Vue文件替換掉就不用擔(dān)心其他的性能問題。由于起步階段不需學(xué)JSX, ES2015以及構(gòu)建系統(tǒng)，所以開發(fā)者只需不到一天的時(shí)間閱讀指南就可以 建立簡單的應(yīng)用程序。原生渲染ReactNative 能使你用相同的組件模型編寫有本地渲染能力的APP (iOS和Android)。能同時(shí)跨多平臺(tái)開發(fā)，對(duì)開發(fā)者是非常棒的。相應(yīng)地，Vue和 Weex會(huì)進(jìn)行官方合作，Weex是阿里巴巴發(fā)起的跨平臺(tái)用戶界面開發(fā)框架，同時(shí)也正在Apache基金會(huì)進(jìn)行項(xiàng)目孵化，Weex允許你使用Vue語法開發(fā)不僅僅可以運(yùn)行在瀏覽器端，還能被用