APP開發與大數據專家

兩全其美:AngularJS 和 ReactJS

對於許多人來說,Vue.js是兩個世界中最好的選擇。它從React中獲得了基於組件的方法、props、組件層級的單向數據流、性能優勢、虛擬渲染能力,以及對正確狀態管理的重視。同時,它也從Angular中繼承了相似的範本和良好的語法,以及當你需要時可進行雙向綁定(在單個組件內部)。

※強弱危機分析

優勢:

• vue.js具有輕量級、易於理解和開發等優勢,對於新手及小型專案非常友善。
• vue.js提供了靈活的架構和模組化的開發方式,可以輕鬆整合其他庫或既有專案。
• vue.js社區活躍並持續成長,為使用者提供豐富的學習資源和即時支援。

劣勢:

• 與react和angular相比, vue.js在一些國際大企業中的採用率仍然較低。
• 雖然vue.js文檔齊全,但因其起源於中國, 在英語資料來源可能相對不足。
• 由於vue.js是由社區驅動的框架,其長期穩定性和可預測性可能受到質疑。

機會:

• 隨著javascript開發需求持續增加, vue.js以其易學易用特性有更多的成長空間。
• 隨著前端技術快速變化, vue.js能快速適應並引入新特性,這也是吸引更多開發者的重要因素。
• 由於vue.js對小型到中型專案非常友善,隨著越來越多的初創企業和獨立開發者的崛起, vue.js有很大的市場潛力。

威脅:

• react和angular等競爭對手持續加強其功能並擁有更大的社區支援。
• 前端技術更新迅速,可能會出現新的框架或技術挑戰vue.js的地位。
• 由於vue.js主要依賴社區驅動, 若未能持續吸引並保留活躍開發者, 可能影響其長期發展。

AngularJS 的啟發

Evan You在Google期間參與了許多AngularJS項目。他意識到如果他能夠提取出AngularJS的最佳部分,就可以建立一個非常輕量級的框架,避免了所有額外的概念。於是他創造了Vue.js,一個完美的前端開發框架。

Vue.js的語法與AngularJS非常相似(例如v-if和ng-if),因為AngularJS在設計上做得很好,不僅啟發了Vue.js,也影響了許多早期開發中的JavaScript框架。Vue.js基本上試圖改進Angular存在的缺點。

不涉及額外概念的 AngularJS

就像我之前說過的那樣,Vue.js是AngularJS的一個延續。它保留了AngularJS最好的特點,但去除了多餘的部分。Vue.js簡單易用、彈性十足,同時提供更高程度的模塊化和運行效能。

可以說,它完美地結合了AngularJS的優點而又沒有增加額外負擔。

複雜性

Vue.js在API和設計上都更簡單。一個網頁開發者可以在一天內建立出簡單的應用程式。而這對於AngularJS來說並非如此。

靈活性與模組化

AngularJS 在應用程式結構方面非常強烈地持有主觀意見。而另一方面,Vue.js 則是一個靈活、模組化的替代方案。對於不喜歡編寫每個應用程式介面部分的人來說,Vue.js 提供了一個 Webpack 範本,同時不限制對高級功能集(如熱模塊重新加載、CSS 提取和 linting 等)的訪問。

運行時效能

就執行效能而言,Vue.js明顯具有優勢,因為它避免了骯髒檢查(dirty checking)。AngularJS在許多監視器下變得極為緩慢 - 當範圍發生變化時,所有監視器都需要重新評估,這實在令人厭煩。Vue.js採用清晰的依賴追蹤觀察系統,配合異步排隊,確保每個變化都能單獨觸發。

指令對比組件

Vue.js對指令和組件的角色有深刻的區別:指令封裝了DOM操作,而組件則是具有自己視圖和數據邏輯的獨立元素。在AngularJS中,組件是指令的一個子集。 這意味著Vue.js區分了指令和組件的職責。

指令主要用於處理DOM操作,例如改變元素樣式、添加事件監聽器等。而組件則更像是一個獨立的模塊,它包含了自己的視圖和數據邏輯。 舉例來說,如果我們需要在頁面上改變某個元素的顏色,我們可以使用一個名為′changeColor′的指令來實現這一功能。

該指令可以接收一個顏色值作為參數並將其應用到相應元素上。 然而,如果我們需要創建一個可重用且具有自己視圖和數據邏輯的元件,我們就可以使用Vue.js提供的′component′功能。通過定義一個名為′myComponent′的組件,在其中可以包含HTML範本、數據綁定和事件處理等。

簡而言之,指令主要用於DOM操作,而組件則更像是一個完整的元素,具有自己的視圖和數據邏輯。這使得我們可以更好地組織和管理我們的代碼,提高代碼的重用性和可讀性。

優化

Vue.js 在渲染過程中追蹤組件的相依性。這樣一來,系統就能確切知道在狀態改變時哪些組件需要重新渲染,而哪些不需要。每個組件都可以呼叫 shouldComponentUpdate 以避免嵌套組件的警告。

JSX 對比模板

在React中,所有組件都使用JSX在render函數中表達它們的UI,這是一種類似XML的語法,將其轉換為JavaScript。而在Vue.js中,默認的用戶體驗是通過範本來實現的,這是一種比JSX更簡單的替代方案。因此,每個有效的HTML都可以作為一個有效的Vue.js範本。

此外,Vue.js還支持render函數和JSX,但Vue.js開發者更傾向於使用範本方法。

元件範疇的 CSS

在Vue.js中,默認的樣式方法是在單檔組件中使用非常友好的style標籤,這允許您完全訪問該文件中的CSS,就像其餘組件代碼一樣。而在React中,則通過CSS-in-JS解決方案來實現這一功能,它呈現了一種新鮮的基於組件的樣式化範式,與通常的CSS編寫流程不同。

在國際開發社區引起轟動:Vue.js

Vue.js是一個開源的漸進式JavaScript框架,用於開發互動式網頁介面。它專注於視圖層,提供了許多功能來處理視圖層,並可用於構建強大的單頁Web應用程式。Vue.js使用JavaScript ES5或ES6語法,而Laravel則為Vue.js提供核心庫。

虛擬 DOM

Vue.js採用虛擬DOM。虛擬DOM本質上是主要DOM元素的複製品,它吸收對DOM的每個更改並以JavaScript數據結構的形式存在。對JavaScript數據結構進行的更改與原始數據結構進行比較,只有最終的更改才會反映在真實的DOM上,這將對用戶可見。

這是一種巧妙的方法,成本較低,且可以以更快速度進行更改。

數據綁定

資料綁定功能透過VueJS中的v-bind指令,幫助我們操控或分配HTML屬性的值、改變樣式,以及分配類別。這個功能使得操作更加方便且容易理解,就像跟人類對話一般。

CSS 轉場和動畫

Vue.js 提供了多種方法來將過渡效果應用於在 DOM 中添加、更新或刪除的 HTML 元素上。Vue.js 內建了一個過渡組件,用於包裝負責返回過渡效果的元素。開發者可以輕鬆地添加協力廠商動畫庫,使用戶體驗更加互動。

模板

正如我之前提到的,Vue.js提供了基於HTML的範本,可以將DOM與Vue.js實例數據綁定在一起。Vue.js會將這些範本編譯成虛擬DOM渲染函數。開發者可以使用這些渲染函數的範本,並且可以用渲染函數替換掉原本的範本。

計算屬性

當我們想要改變一個屬性,而這個屬性是依賴於其他屬性的變化時,可以使用計算屬性。計算屬性通常依賴於其他數據屬性。任何對依賴屬性的更改都會觸發計算屬性的邏輯。

計算屬性根據它們的相依關係進行緩存,因此只有在相依項目發生變化時才會重新運行。這使得它們更像是人類語言,並且更容易理解和閱讀。

觀察者

當我們需要根據特定資料屬性的變化執行一些邏輯時,可以使用觀察器(watchers)。觀察的屬性只能作用在一個屬性上。這在你想要對變化的資料執行異步或昂貴操作時非常有用。

方法

當我們想要改變組件的狀態或者事件發生時,可以使用方法。這些事件不一定與實例數據的改變有關。方法可以接受參數,但不會跟蹤任何依賴關係。

通常情況下,方法會在組件重新加載時觸發並產生一些副作用。現在重點整理以下幾點: - 方法被用於修改組件狀態或處理與實例數據無關的事件。 - 方法可以接受參數,但不保留任何依賴關係。

- 每次組件重新加載時都會觸發方法。 - 方法通常會對組件產生某種副作用。 這樣修改後的內容更加流暢、易於理解,更貼近人類語言的表達方式。

相關數據:

• 根據state of js 2020的調查,全球有40.5%的開發者表示他們已經使用並且會再次使用vue.js 來源: state of js
• github上vue.js的星數至2021年12月已經超過185,000顆,表明該框架受到開發者廣泛的喜愛和關注 來源: github
• 至2021年底,vue.js在stack overflow developer survey中被近30%的專業開發人員選為最喜歡使用的前端javascript框架。 來源: stack overflow developer survey
• 根據builtwith統計,全球超過130萬個現存網站正在使用vue.js。 來源: builtwith
• npm統計數據顯示,在過去12個月內,vue.js每週平均下載量約為180萬次 來源: npm