是什么讓我愛上了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中，使用了類似的方法，但是有一個根本的區別-應用程序輸入數據的每個字段都使用
- 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框架的主要優點：
- Vue.js與Angular具有許多相似的特性，這可以幫助優化使用不同組件的HTML塊的處理。
- Vue.js擁有非常豐富的文檔，可以捕獲開發人員的學習曲線，并僅使用HTML和JavaScript的基本知識即可節省開發應用程序的大量時間。
- 由于在設計和架構方面與Angular和React相似，因此它提供了與Vue.js中其他框架的快速切換器。
- Vue.js可用于創建單頁應用程序和更復雜的Web界面。最主要的是，小的交互部分可以輕松集成到現有基礎架構中，而不會對整個系統造成負面影響。
- 沒有堆棧要求，因此Vue.JS可以在任何項目上使用。
- Vue.js的重量約為20 KB，保留了其速度和靈活性，這使其比其他平臺具有更高的性能。
- 由于使用了所有模板并提供了文檔，因此，大多數出現的問題都得到了很快的解決。包括與React相比，由于在大多數不具有復雜接口的應用程序中，該框架的全部功能有點多余。
- Vue.js根據其簡單的結構，可以幫助開發相當大的可重用模板，而無需為此分配額外的時間即可制作出這些模板。
- 幾乎所有對前端至少有點熟悉的開發人員都能找到并連接到項目。較低的進入門檻允許前端和后端開發人員均可使用該框架。
- 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支持兩者。
每個框架都有其優缺點，這意味著在產品開發過程中，每個案例都應該有正確的選擇。
