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