在過(guò)去的十年中，由于有了JavaScript，網(wǎng)頁(yè)已變得動(dòng)態(tài)和強(qiáng)大。成都小程序設(shè)計(jì)已經(jīng)將更多代碼從服務(wù)器端移到了瀏覽器，這使我們的代碼變得混亂。這就是JavaScript開(kāi)發(fā)人員開(kāi)始使用Angular和React之類的JavaScript框架的原因。
Angular和React非常流行，盡管也出現(xiàn)了許多新的前端JavaScript框架。一個(gè)迅速流行的新貴是Vue.js。根據(jù)NPM軟件包管理器報(bào)告的下載趨勢(shì)，截至2018年2月，Vue略落后于Angular。
Vue易于學(xué)習(xí)，因此您可以立即開(kāi)始構(gòu)建第一個(gè)應(yīng)用程序。Vue采用了React和Angular的最佳概念，使其簡(jiǎn)潔，簡(jiǎn)潔，并讓開(kāi)發(fā)人員專注于完成工作。
Vue繼承了React和Angular的那些概念是什么，它們有助于解決什么問(wèn)題？
我們將立即發(fā)現(xiàn)答案。
Vue是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)框架。這意味著，如果您有現(xiàn)有的服務(wù)器端應(yīng)用程序，則可以將Vue僅插入應(yīng)用程序中需要更多生產(chǎn)性和交互式體驗(yàn)的特定部分。
與其他整體框架不同，Vue從頭開(kāi)始設(shè)計(jì)以逐漸采用。
Vue是一種平易近人，功能強(qiáng)大且性能卓越的JavaScript框架，可幫助您創(chuàng)建可維護(hù)的代碼庫(kù)。到目前為止，一些開(kāi)發(fā)人員認(rèn)為這是對(duì)JavaScript的最重大更改。
它的核心庫(kù)僅集中在視圖層，并且易于拾取并與其他庫(kù)或現(xiàn)有項(xiàng)目集成。但是，它還完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序（SPA）提供支持，并提供現(xiàn)代工具和支持庫(kù)。
Vue的最大好處是沒(méi)有血統(tǒng)書。它是新鮮的，幾乎沒(méi)有行李。它是從React和Angular的錯(cuò)誤和成功中學(xué)到的。
Angular是一個(gè)包含其工具和最佳實(shí)踐的完整框架。反過(guò)來(lái)，React則是一個(gè)庫(kù)。盡管如此，兩者都有各自的長(zhǎng)處，這是Vue最好的繼承自React和Angular的東西。
React和Angular都有基于組件的模型，而Vue繼承了這一重要概念。
基于組件的模型是一種抽象，使您可以構(gòu)建由小型，自包含且經(jīng)常可重復(fù)使用的組件組成的大規(guī)模應(yīng)用程序：標(biāo)題，導(dǎo)航欄，主布局，側(cè)邊欄，頁(yè)腳等。
使用多個(gè)獨(dú)立組件是構(gòu)建SPA的正確方法。該概念為前端開(kāi)發(fā)人員提供了一組可擴(kuò)展的，建立良好的和可重用的組件，并有助于加快開(kāi)發(fā)速度。
動(dòng)畫是2010年代后期的王者。與廣告牌如何從靜態(tài)變?yōu)閯?dòng)畫一樣，網(wǎng)站和應(yīng)用程序也正在變得動(dòng)畫化。
React和Angular都有內(nèi)置的動(dòng)畫解決方案，并通過(guò)功能性的動(dòng)畫組件增強(qiáng)Vue的功能。
AngularJS中的動(dòng)畫完全基于CSS類，并通過(guò)ngAnimate模塊實(shí)現(xiàn)。只要您在應(yīng)用程序中的HTML元素上附加了CSS類，就可以對(duì)其應(yīng)用動(dòng)畫。
至于React，它有一個(gè)受ngAnimate啟發(fā)的動(dòng)畫高級(jí)API （ReactCSSTransitionGroup）。
Vue允許您執(zhí)行單個(gè)組件動(dòng)畫，列出動(dòng)畫，初始渲染時(shí)的過(guò)渡，元素和組件之間的過(guò)渡以及動(dòng)態(tài)過(guò)渡。
使用Vue，您可以與觀察者一起創(chuàng)建狀態(tài)轉(zhuǎn)換，以動(dòng)畫化數(shù)字和計(jì)算，顏色，SVG節(jié)點(diǎn)的位置，大小以及元素的其他屬性。Vue允許您使用第三方庫(kù)，反應(yīng)性和組件系統(tǒng)將這些狀態(tài)更改動(dòng)畫化為補(bǔ)間狀態(tài)。
Vue及其過(guò)渡包裝器組件中語(yǔ)法的簡(jiǎn)單性使您可以在任何元素或組件上執(zhí)行過(guò)渡。
實(shí)施方法如下：
現(xiàn)成組件的可用性有助于減少代碼量，使模板更易于閱讀，并簡(jiǎn)化您的生活。
JavaScript框架在客戶端呈現(xiàn)頁(yè)面。但是，也可以在服務(wù)器上將相同的組件呈現(xiàn)為HTML，然后將它們直接發(fā)送到瀏覽器。
服務(wù)器端渲染是在客戶端上構(gòu)建應(yīng)用程序的一種方法。簡(jiǎn)而言之，服務(wù)器端渲染有助于在屏幕上顯示信息。默認(rèn)情況下，Vue組件在瀏覽器中構(gòu)建和處理DOM。但是，您也可以在服務(wù)器上通過(guò)HTML呈現(xiàn)相同的組件，將它們發(fā)送到瀏覽器，并將靜態(tài)標(biāo)記“添加”到交互式客戶端應(yīng)用程序中。
服務(wù)器端渲染旨在在屏幕上顯示信息。它通過(guò)將服務(wù)器中的HTML文件轉(zhuǎn)換為瀏覽器的可用信息來(lái)工作。這種方法還使搜尋器可以接收完整的網(wǎng)站內(nèi)容，從而使搜索引擎更容易分析和索引您的網(wǎng)站。
從本質(zhì)上講，服務(wù)器端渲染對(duì)SEO很有好處。確保在社交網(wǎng)絡(luò)上共享內(nèi)容；改善用戶體驗(yàn)，縮短發(fā)布時(shí)間和提高性能；并且可以處理高流量。
這三個(gè)框架（React，Angular和Vue）都有庫(kù)來(lái)幫助服務(wù)器端渲染。對(duì)于React，有內(nèi)置的ReactDOMServer對(duì)象和Next.js框架，Angular具有Angular Universal，Vue具有Nuxt.js。
Nuxt.js是建立在Vue生態(tài)系統(tǒng)之上的高級(jí)框架。它為編寫通用Vue應(yīng)用程序提供了極為精簡(jiǎn)的開(kāi)發(fā)經(jīng)驗(yàn)。更好的是，您甚至可以將其用作靜態(tài)站點(diǎn)生成器。
通過(guò)本機(jī)渲染，您可以跨多個(gè)平臺(tái)應(yīng)用對(duì)一個(gè)框架的了解，從而僅使用JavaScript構(gòu)建移動(dòng)應(yīng)用程序。您可以使用React Native在React中構(gòu)建跨平臺(tái)應(yīng)用程序，并相應(yīng)地將Ionic和NativeScript與Angular結(jié)合使用。
在這一方面，Vue與跨平臺(tái)UI框架Weex進(jìn)行了正式合作。Weex允許您從同一代碼庫(kù)為Web（HTML），Android和iOS生成構(gòu)建。
Vue開(kāi)發(fā)人員的另一個(gè)選擇是通過(guò)社區(qū)驅(qū)動(dòng)的插件的NativeScript。
Weex和NativeScript都可以幫助您創(chuàng)建自適應(yīng)的平臺(tái)本地UI，并針對(duì)特定設(shè)備和屏幕進(jìn)行量身定制。
React和Vue非常相似。兩者都是用于創(chuàng)建應(yīng)用程序前端的JavaScript庫(kù)。它們各自的生態(tài)系統(tǒng)使我們能夠輕松地圍繞React和Vue構(gòu)建框架。讓我們看一下從React繼承的使Vue功能強(qiáng)大且高效的組件。
React和Vue都有一個(gè)虛擬DOM（文檔對(duì)象模型），可以提高性能。
DOM是樹狀結(jié)構(gòu)文本的抽象。因此，虛擬DOM依次是抽象的抽象。虛擬DOM包含由JavaScript對(duì)象組成的輕量級(jí)樹，這些對(duì)象是DOM樹的輕量級(jí)副本。
如今，DOM樹非常龐大。由于我們?cè)絹?lái)越傾向于SPA，因此我們需要大量修改DOM樹。這就是Vue和React所設(shè)計(jì)的。
他們的虛擬DOM是輕量級(jí)且跨瀏覽器的。這種方法使您可以提高開(kāi)發(fā)速度。在這種情況下，Vue對(duì)虛擬DOM的實(shí)現(xiàn)更加輕巧，這使Vue表現(xiàn)出了更好的性能。
Vue在模板到虛擬DOM的編譯階段應(yīng)用了一些高級(jí)優(yōu)化：
它確定靜態(tài)類的名稱和屬性，以確保它們?cè)诔跏间秩竞蟛粫?huì)發(fā)生變化。
它檢測(cè)沒(méi)有動(dòng)態(tài)綁定的最大靜態(tài)子樹并將其從渲染函數(shù)中選取。因此，在每次重新渲染時(shí)，Vue都會(huì)跳過(guò)差異并重新使用相同的虛擬節(jié)點(diǎn)。
在React中，可以使用JSX在渲染函數(shù)中用其UI來(lái)表示響應(yīng)元，JSX是一種在JavaScript中工作的類似于XML的聲明性語(yǔ)法。
JSX的渲染功能具有一些優(yōu)勢(shì)。它們使您可以利用JavaScript的全部功能來(lái)構(gòu)建視圖并為JSX提供廣泛的工具支持：插入，類型檢查，編輯器自動(dòng)完成等。
Vue還具有渲染功能和JSX支持。此外，Vue提供了一種基于常規(guī)HTML的替代語(yǔ)法。使用基于HTML的模板，可以通過(guò)減少學(xué)習(xí)時(shí)間來(lái)提高開(kāi)發(fā)人員的生產(chǎn)力，并使他們更容易解析和貢獻(xiàn)代碼庫(kù)。
基于HTML的模板旨在簡(jiǎn)化現(xiàn)有應(yīng)用程序的遷移，使用預(yù)處理器（HAML，Pug），并導(dǎo)致完全實(shí)現(xiàn)Vue的反應(yīng)性功能。
我們可以將框架組件分為兩類：表現(xiàn)型和邏輯型。對(duì)于呈現(xiàn)組件，建議使用模板語(yǔ)法，而對(duì)于邏輯組件，建議使用呈現(xiàn)功能和JSX。
JSX為開(kāi)發(fā)提供了很大的優(yōu)勢(shì)，因?yàn)樗鼘⑺袃?nèi)容放在一個(gè)地方，使代碼完成和編譯時(shí)檢查更好地工作，并且作為以前的React概念，它以JS為中心。
為了支持JSX，Vue需要babel-plugin-transform-vue-jsx。
讓我們看一下渲染功能和JSX在Vue和React中的外觀。
視圖層是現(xiàn)代SPA框架的關(guān)鍵部分。畢竟，這就是SPA的重點(diǎn)：它們簡(jiǎn)化了獲取豐富的交互式視圖的方式。基本上，視圖層是用于將數(shù)據(jù)傳入和傳出應(yīng)用程序的通道。
視圖負(fù)責(zé)完成以下任務(wù)：
渲染模板。我們需要一種將數(shù)據(jù)映射到HTML的方法。
更新視圖以響應(yīng)更改事件。當(dāng)模型數(shù)據(jù)更改時(shí)，我們需要更新相關(guān)視圖以反映新數(shù)據(jù)。
通過(guò)事件處理程序?qū)⑿袨榻壎ǖ紿TML。當(dāng)用戶與視圖HTML交互時(shí)，我們需要一種觸發(fā)行為的方法。
提供執(zhí)行這些任務(wù)的標(biāo)準(zhǔn)機(jī)制或約定。
由于Vue和React的核心庫(kù)專注于視圖層，因此配套庫(kù)可以處理其他任務(wù)，例如路由和全局狀態(tài)管理。React的配套庫(kù)是react-router和redux，而Vue具有vue-router和vuex庫(kù)。
專注于視圖層使Vue或React與第三方庫(kù)和現(xiàn)有項(xiàng)目的集成變得容易。反過(guò)來(lái)，這使Vue和React比Angular更靈活。
Angular是一個(gè)成熟的Web框架，具有全套工具和概念，可簡(jiǎn)化前端開(kāi)發(fā)人員的生活。以下是Vue繼承的一些內(nèi)容。
指令是引入新語(yǔ)法的內(nèi)容。偽指令是DOM元素上的標(biāo)記，這些標(biāo)記將特殊行為附加到其上。指令的工作是在其表達(dá)式的值發(fā)生更改時(shí)以響應(yīng)方式將副作用施加到DOM。
如果您之前編寫過(guò)Angular應(yīng)用程序，那么無(wú)論您是否意識(shí)到，都曾經(jīng)使用過(guò)指令。您可能使用了簡(jiǎn)單的指令，例如ng-model，ng-repeat，ng-show等。所有這些指令將特殊行為附加到DOM元素。
Vue繼承了Angular基于指令的語(yǔ)法。特別是，Vue具有帶有v-前綴的特殊指令，該指令在表單元素和變量之間提供雙向數(shù)據(jù)綁定，我們將在下一節(jié)中介紹。
除了默認(rèn)的Vue核心指令集（v-model和v-show），Vue還允許您注冊(cè)自定義選項(xiàng)。當(dāng)涉及對(duì)普通元素的低級(jí)DOM訪問(wèn)時(shí)，自定義指令很有用。
數(shù)據(jù)綁定是將數(shù)據(jù)模型連接到用戶界面的機(jī)制。數(shù)據(jù)綁定有三種主要形式：一次性，單向和雙向。選擇正確的選擇涉及很多考慮。
通過(guò)單向和單向數(shù)據(jù)綁定，數(shù)據(jù)從模型流到用戶界面。雙向數(shù)據(jù)綁定包括單向綁定，并且還允許從DOM綁定回JavaScript。
這就是Angular的亮點(diǎn)：它鼓勵(lì)在組件內(nèi)使用雙向數(shù)據(jù)綁定技術(shù)來(lái)進(jìn)行瑣碎的Model-UI更新。Angular在范圍之間使用雙向綁定，而Vue在組件之間強(qiáng)制執(zhí)行單向數(shù)據(jù)流。這使數(shù)據(jù)流在非平凡的應(yīng)用程序中更易于理解。
我們可以使用Vue中的v-model指令和Angular中的ng-model來(lái)執(zhí)行數(shù)據(jù)綁定：
盡管對(duì)于觀察者及其有用性存在不同的觀點(diǎn)，但仍有一些時(shí)候需要自定義觀察者。
在Angular中，您基本上可以在使用內(nèi)置Angular指令（ng-show，ng-if，ng-repeat）的任何時(shí)間創(chuàng)建觀察者。對(duì)于每個(gè)觀察者，都將相應(yīng)的功能添加到摘要循環(huán)。摘要循環(huán)又使雙向數(shù)據(jù)綁定成為可能。盡管如此，使用觀察程序仍然有其缺點(diǎn)，性能問(wèn)題是最重要的。
Vue通過(guò)watch選項(xiàng)提供了一種更通用的方式來(lái)處理數(shù)據(jù)更改。在大多數(shù)情況下，計(jì)算屬性是一個(gè)更合適的解決方案。但是，在Vue中，當(dāng)您要執(zhí)行異步或昂貴的操作以響應(yīng)更改的數(shù)據(jù)時(shí)，監(jiān)視程序最有用。
觀察者還有助于限制執(zhí)行異步或昂貴操作的頻率以及設(shè)置中間狀態(tài)。這是計(jì)算屬性無(wú)法完美應(yīng)對(duì)的。
Vue和Angular都實(shí)現(xiàn)了可在標(biāo)記內(nèi)使用的特殊過(guò)濾器語(yǔ)法。過(guò)濾器是必不可少的功能，它可以選擇一個(gè)值，對(duì)其進(jìn)行處理，然后返回處理后的值。這兩個(gè)框架都具有有用的內(nèi)置過(guò)濾器以及對(duì)自定義過(guò)濾器的支持。
Vue允許您定義可用于應(yīng)用通用文本格式的過(guò)濾器。過(guò)濾器在兩個(gè)地方可用：小胡子插值和 v-bind 表達(dá)式。在這里，您可以找到 Vue提供的過(guò)濾器列表。
除此之外，Angular和Vue的實(shí)現(xiàn)是相同的。
在本概述中，我們只是從頭開(kāi)始，但我們希望這些關(guān)鍵點(diǎn)能幫助您了解Vue專注于保持輕快。盡管如此，其生態(tài)系統(tǒng)中還有很多可以幫助您構(gòu)建，組織和擴(kuò)展前端應(yīng)用程序的東西。
Vue為React和Angular問(wèn)題提供了成都小程序設(shè)計(jì)更多的解決方案，并為您提供了一種更加簡(jiǎn)單易用的編碼方式。我們相信，如果JavaScript對(duì)您不再有樂(lè)趣，Vue將幫助您再次找到樂(lè)趣。
