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