是什麼讓我愛上了Vue.js

前言

Vue.js是用於創建用戶界面的開源JavaScript框架。使用其他JavaScript庫輕鬆集成到項目中。它可以充當Web框架，幫助開發高級一頁應用程式。

2013年，從事其中一個項目的Google Evan You的一名員工得出的結論是，尚無現成的解決方案來快速原型化Web應用程式的複雜用戶界面。

React那時還處於開發的早期階段，主要工具是諸如AngularJS或面向MVC的Backbone.js之類的複雜框架，這些框架不是很簡單，而是專注於開發大型應用程式。

為了克服這一差距，您開始開發Vue.js，該Vue.js在保持簡單性的同時，不僅適用於原型設計，還適用於全面的開發。

從理論上講，Vue.js是jQuery的替代品。但實際上，Vue.JS與React.JS(View領域的明顯領導者)競爭非常成功。從解決類似問題的現代流行技術中，您還可以選擇Angular和Ember。它們每個都有其優點和缺點。但是，所有這些框架都可以簡化為一個共同點-開發的相對複雜性。

VUE.JS VS其他

Vue.JS著眼於所列技術的最佳實踐。Vue團隊從React.JS中借鑑了虛擬DOM的想法。這種方法消除了與接口節點的直接交互。最初的工作是通過其輕量級副本-虛擬DOM進行的。

僅在此更改應用於真實接口節點之後。同時，將對真實DOM樹及其虛擬副本進行比較。這樣，差異就被揭示了，只有變化的才被重畫。

從Angular Vue.JS借來了雙向數據綁定。這使您可以設計接口：首先，以聲明方式;其次，在模板引擎中使用Vue。例如Haml或Pug。但是，的確，例如，在Knockout.JS框架中已經實踐過這種方法。

Vue.JS內核與React一樣，僅包含使用接口所需的功能。因此，它結構緊湊，可以輕鬆地與包括jQuery在內的其他技術集成，甚至可以用來開發簡單的界面。

此外，Vue具有許多插件，這些插件實現了用於開發Web應用程式的現代方法。什麼事啊 例如，幾乎所有React應用程式都是與狀態控制技術Redux一起設計的，狀態控制技術Redux是一個獨立的庫，並實現了磁通架構。

Redux庫實踐的方法被證明是非常方便和成功的。因此，Vue.JS開發了自己的應用程式狀態控制技術-Vuex。

Vuex完全借鑑了Redux的思想，但是該庫與Vue的集成度比React和Redux更高。這轉化為速度和便利性。

VUE.JS主要區別點

1.反應性

反應性是指應用程式內部的數據與顯示器中的數據直接相關，並且在任何部分進行更改都會立即影響屏幕的重繪。在React中如何實現反應性?

簡而言之，我們在應用程式中使用的所有數據都存儲在state和props中，如有必要，請更改數據，然後通過setState進行更改，然後React確定應用程式的哪些部分依賴於修改後的數據並重新繪製。

在Vue.js中，使用了類似的方法，但是有一個根本的區別-應用程式輸入數據的每個欄位都使用

1. Object.defineProperty 

並分為設置器/獲取器對。

在他們的幫助下，Vue可以跟蹤正在讀取或修改的數據，並可以具體確定哪些因素會影響顯示效果。

2.計算屬性

Vue中有幾種組件數據類型：

• 數據-基本數據;
• 道具-從父組件傳輸的數據;
• 計算-可以基於前兩個計算的數據。

概念的分離是一個簡單但方便的想法。與React的方法相比，後者具有許多優點：

• 我們不再為組件生產形式為getFullName的輔助方法。
• 它們是反應性的，在第一次計算時，藉助於擴展的getter(在第一段中描述的原理)，它們收集依賴關係，並確定何時需要更改哪些數據重新計算;
• 它們是惰性的，即僅在訪問它們時才計數，而不是在依賴數據的每次更改時都進行計數;
• 根據輸入數據進行緩存。
• 在Redux中處理大量樣本時，可以通過Reselect實現類似的行為。

3.內置翻轉動畫

在框架中方便地描述動畫的想法遠不是新的(ng-animate，ReactCSSTransitionGroup)。開箱即用，使FLIP動畫驚喜。簡而言之，當您先了解移動元素的總位置然後藉助平移移動時，這是一種移動元素的動畫。在Vue中，只需幾行代碼即可獲得該動畫

4.組件和VUE加載程序

Vue建議將所有組件代碼(js，樣式，模式)存儲在單個文件中，這是一種非常不尋常的方法。我們不會判斷它的舒適程度，尤其是當您的組件距離原子原子遠的時候。

但是有一點奇怪，這些組件是通過vue-loader用於webpack加載的，這對您隱藏了構建的複雜性，允許立即使用您喜歡的技術ES6，coffeeScript，Sass，postCSS，CSS模塊，jade (pug)等。

而且與React不同，我們不需要處理新的JSX語言，我們將繼續使用我們熟悉的語言或使用完全不同的HTML生成器，例如PUG。

沒有設置，很酷吧?

5.插槽

插槽的想法來自Web組件，並且非常簡單-如果您需要在另一個組件中轉移多個組件，則可以指定顯示它們的位置。

這種方法使您可以製作複雜的組件，包裝程序，這些組件很容易從內部發生的事情中抽象出來。因此，例如，您可以製作具有多個插槽的布局組件：

讓我們看一個真實的例子嗎?

最近，我參與了Cloud Checker 服務的開發，該 服務可以分析雲服務並優化其使用。

這是積極使用Vue的地方。在開發項目設計時，以Google Material Design為基礎，它簡單，嚴謹，非常適合此任務，但是儘管如此，它還是非常令人愉悅且用戶友好的。

因此，在編寫前端部分的準備階段，決定使用現成的材料組件框架作為Vuetify。它在編寫模板時非常直觀且相對簡單，它還存儲了難以置信的龐大而強大的現成組件庫，這些組件對於從盒子中創建完整的現成應用程式是必需的。

VUE.JS的利弊

VUE.JS專業版

在檢查了該技術的關鍵特性並在實踐中對其進行了測試之後，您可以列出Vue框架的主要優點：

1. Vue.js與Angular具有許多相似的特性，這可以幫助優化使用不同組件的HTML塊的處理。
2. Vue.js擁有非常豐富的文檔，可以捕獲開發人員的學習曲線，並僅使用HTML和JavaScript的基本知識即可節省開發應用程式的大量時間。
3. 由於在設計和架構方面與Angular和React相似，因此它提供了與Vue.js中其他框架的快速切換器。
4. Vue.js可用於創建單頁應用程式和更複雜的Web界面。最主要的是，小的交互部分可以輕鬆集成到現有基礎架構中，而不會對整個系統造成負面影響。
5. 沒有堆棧要求，因此Vue.JS可以在任何項目上使用。
6. Vue.js的重量約為20 KB，保留了其速度和靈活性，這使其比其他平臺具有更高的性能。
7. 由於使用了所有模板並提供了文檔，因此，大多數出現的問題都得到了很快的解決。包括與React相比，由於在大多數不具有複雜接口的應用程式中，該框架的全部功能有點多餘。
8. Vue.js根據其簡單的結構，可以幫助開發相當大的可重用模板，而無需為此分配額外的時間即可製作出這些模板。
9. 幾乎所有對前端至少有點熟悉的開發人員都能找到並連接到項目。較低的進入門檻允許前端和後端開發人員均可使用該框架。
10. Vue允許您創建滿足所有現代標準的功能應用程式，並且只需最少的新資源連接，並且實際上更便宜。

VUE.JS缺點

與React.JS相比，還有一些缺點：

• 在應用程式狀態下的工作是「幕後」。它增加了新開發人員的入門門檻，但是對於我們的團隊來說，這並不是真正的劣勢。
• 與React或Angular相比，Vue.js的市場份額仍然很小，這意味著該框架下的知識共享仍處於起步階段。但是應該指出的是，趨勢正在發生巨大變化，Vue的發展勢頭比其他框架要快得多。
• 由於Vue.js具有一定的中文基礎，因此許多元素和說明仍然提供中文。這在開發的某些階段會導致部分複雜，但是，越來越多的材料翻譯成英文。至於個人經驗，我們的團隊在Vue的幫助下處理任何複雜的任務，並且在使用該框架時沒有遇到任何誤解。

儘管Vue.js的工作存在此類缺陷，但我們的開發團隊在處理技術方面擁有豐富的經驗，並且隨時準備應對任何複雜甚至是繁重的任務。

今天，Vue.js已被小米，阿里巴巴，WizzAir，EuroNews，Grammarly，Gitlab和Laracasts，Adobe，Behance，Codeship和Reuters等公司使用。

Angular和React有自己的做事方式，Vue相當容易。許多公司都選擇Vue，因為它易於使用。使用Angular或React開發需要良好的JavaScript知識，並且您需要就第三方庫做出很多決定。

現在，如果我們在這種情況下考慮我們的框架，Angular使用雙向數據綁定，React用於單數據流，而Vue支持兩者。

每個框架都有其優缺點，這意味著在產品開發過程中，每個案例都應該有正確的選擇。

【編輯推薦】

【責任編輯：

未麗燕

TEL：[phone]】

點讚 0