前言

Vue.js是用于創(chuàng)建用戶界面的開(kāi)源JavaScript框架。使用其他JavaScript庫(kù)輕松集成到項(xiàng)目中。它可以充當(dāng)Web框架，幫助開(kāi)發(fā)高級(jí)一頁(yè)應(yīng)用程序。

2013年，從事其中一個(gè)項(xiàng)目的Google Evan You的一名員工得出的結(jié)論是，尚無(wú)現(xiàn)成的解決方案來(lái)快速原型化Web應(yīng)用程序的復(fù)雜用戶界面。

React那時(shí)還處于開(kāi)發(fā)的早期階段，主要工具是諸如AngularJS或面向MVC的Backbone.js之類的復(fù)雜框架，這些框架不是很簡(jiǎn)單，而是專注于開(kāi)發(fā)大型應(yīng)用程序。

為了克服這一差距，您開(kāi)始開(kāi)發(fā)Vue.js，該Vue.js在保持簡(jiǎn)單性的同時(shí)，不僅適用于原型設(shè)計(jì)，還適用于全面的開(kāi)發(fā)。

從理論上講，Vue.js是jQuery的替代品。但實(shí)際上，Vue.JS與React.JS(View領(lǐng)域的明顯領(lǐng)導(dǎo)者)競(jìng)爭(zhēng)非常成功。從解決類似問(wèn)題的現(xiàn)代流行技術(shù)中，您還可以選擇Angular和Ember。它們每個(gè)都有其優(yōu)點(diǎn)和缺點(diǎn)。但是，所有這些框架都可以簡(jiǎn)化為一個(gè)共同點(diǎn)-開(kāi)發(fā)的相對(duì)復(fù)雜性。

VUE.JS VS其他

Vue.JS著眼于所列技術(shù)的最佳實(shí)踐。Vue團(tuán)隊(duì)從React.JS中借鑒了虛擬DOM的想法。這種方法消除了與接口節(jié)點(diǎn)的直接交互。最初的工作是通過(guò)其輕量級(jí)副本-虛擬DOM進(jìn)行的。

僅在此更改應(yīng)用于真實(shí)接口節(jié)點(diǎn)之后。同時(shí)，將對(duì)真實(shí)DOM樹(shù)及其虛擬副本進(jìn)行比較。這樣，差異就被揭示了，只有變化的才被重畫。

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

Vue.JS內(nèi)核與React一樣，僅包含使用接口所需的功能。因此，它結(jié)構(gòu)緊湊，可以輕松地與包括jQuery在內(nèi)的其他技術(shù)集成，甚至可以用來(lái)開(kāi)發(fā)簡(jiǎn)單的界面。

此外，Vue具有許多插件，這些插件實(shí)現(xiàn)了用于開(kāi)發(fā)Web應(yīng)用程序的現(xiàn)代方法。什么事啊 例如，幾乎所有React應(yīng)用程序都是與狀態(tài)控制技術(shù)Redux一起設(shè)計(jì)的，狀態(tài)控制技術(shù)Redux是一個(gè)獨(dú)立的庫(kù)，并實(shí)現(xiàn)了磁通架構(gòu)。

Redux庫(kù)實(shí)踐的方法被證明是非常方便和成功的。因此，Vue.JS開(kāi)發(fā)了自己的應(yīng)用程序狀態(tài)控制技術(shù)-Vuex。

Vuex完全借鑒了Redux的思想，但是該庫(kù)與Vue的集成度比React和Redux更高。這轉(zhuǎn)化為速度和便利性。

VUE.JS主要區(qū)別點(diǎn)

1.反應(yīng)性

反應(yīng)性是指應(yīng)用程序內(nèi)部的數(shù)據(jù)與顯示器中的數(shù)據(jù)直接相關(guān)，并且在任何部分進(jìn)行更改都會(huì)立即影響屏幕的重繪。在React中如何實(shí)現(xiàn)反應(yīng)性?

簡(jiǎn)而言之，我們?cè)趹?yīng)用程序中使用的所有數(shù)據(jù)都存儲(chǔ)在state和props中，如有必要，請(qǐng)更改數(shù)據(jù)，然后通過(guò)setState進(jìn)行更改，然后React確定應(yīng)用程序的哪些部分依賴于修改后的數(shù)據(jù)并重新繪制。

在Vue.js中，使用了類似的方法，但是有一個(gè)根本的區(qū)別-應(yīng)用程序輸入數(shù)據(jù)的每個(gè)字段都使用

Object.defineProperty 

并分為設(shè)置器/獲取器對(duì)。

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

2.計(jì)算屬性

Vue中有幾種組件數(shù)據(jù)類型：

• 數(shù)據(jù)-基本數(shù)據(jù);
• 道具-從父組件傳輸?shù)臄?shù)據(jù);
• 計(jì)算-可以基于前兩個(gè)計(jì)算的數(shù)據(jù)。

概念的分離是一個(gè)簡(jiǎn)單但方便的想法。與React的方法相比，后者具有許多優(yōu)點(diǎn)：

• 我們不再為組件生產(chǎn)形式為getFullName的輔助方法。
• 它們是反應(yīng)性的，在第一次計(jì)算時(shí)，借助于擴(kuò)展的getter(在第一段中描述的原理)，它們收集依賴關(guān)系，并確定何時(shí)需要更改哪些數(shù)據(jù)重新計(jì)算;
• 它們是惰性的，即僅在訪問(wèn)它們時(shí)才計(jì)數(shù)，而不是在依賴數(shù)據(jù)的每次更改時(shí)都進(jìn)行計(jì)數(shù);
• 根據(jù)輸入數(shù)據(jù)進(jìn)行緩存。
• 在Redux中處理大量樣本時(shí)，可以通過(guò)Reselect實(shí)現(xiàn)類似的行為。

3.內(nèi)置翻轉(zhuǎn)動(dòng)畫

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

4.組件和VUE加載程序

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

但是有一點(diǎn)奇怪，這些組件是通過(guò)vue-loader用于webpack加載的，這對(duì)您隱藏了構(gòu)建的復(fù)雜性，允許立即使用您喜歡的技術(shù)ES6，coffeeScript，Sass，postCSS，CSS模塊，jade (pug)等。

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

沒(méi)有設(shè)置，很酷吧?

5.插槽

插槽的想法來(lái)自Web組件，并且非常簡(jiǎn)單-如果您需要在另一個(gè)組件中轉(zhuǎn)移多個(gè)組件，則可以指定顯示它們的位置。

這種方法使您可以制作復(fù)雜的組件，包裝程序，這些組件很容易從內(nèi)部發(fā)生的事情中抽象出來(lái)。因此，例如，您可以制作具有多個(gè)插槽的布局組件：

讓我們看一個(gè)真實(shí)的例子嗎?

最近，我參與了Cloud Checker 服務(wù)的開(kāi)發(fā)，該 服務(wù)可以分析云服務(wù)并優(yōu)化其使用。

這是積極使用Vue的地方。在開(kāi)發(fā)項(xiàng)目設(shè)計(jì)時(shí)，以Google Material Design為基礎(chǔ)，它簡(jiǎn)單，嚴(yán)謹(jǐn)，非常適合此任務(wù)，但是盡管如此，它還是非常令人愉悅且用戶友好的。

因此，在編寫前端部分的準(zhǔn)備階段，決定使用現(xiàn)成的材料組件框架作為Vuetify。它在編寫模板時(shí)非常直觀且相對(duì)簡(jiǎn)單，它還存儲(chǔ)了難以置信的龐大而強(qiáng)大的現(xiàn)成組件庫(kù)，這些組件對(duì)于從盒子中創(chuàng)建完整的現(xiàn)成應(yīng)用程序是必需的。

VUE.JS的利弊

VUE.JS專業(yè)版

在檢查了該技術(shù)的關(guān)鍵特性并在實(shí)踐中對(duì)其進(jìn)行了測(cè)試之后，您可以列出Vue框架的主要優(yōu)點(diǎn)：

1. Vue.js與Angular具有許多相似的特性，這可以幫助優(yōu)化使用不同組件的HTML塊的處理。
2. Vue.js擁有非常豐富的文檔，可以捕獲開(kāi)發(fā)人員的學(xué)習(xí)曲線，并僅使用HTML和JavaScript的基本知識(shí)即可節(jié)省開(kāi)發(fā)應(yīng)用程序的大量時(shí)間。
3. 由于在設(shè)計(jì)和架構(gòu)方面與Angular和React相似，因此它提供了與Vue.js中其他框架的快速切換器。
4. Vue.js可用于創(chuàng)建單頁(yè)應(yīng)用程序和更復(fù)雜的Web界面。最主要的是，小的交互部分可以輕松集成到現(xiàn)有基礎(chǔ)架構(gòu)中，而不會(huì)對(duì)整個(gè)系統(tǒng)造成負(fù)面影響。
5. 沒(méi)有堆棧要求，因此Vue.JS可以在任何項(xiàng)目上使用。
6. Vue.js的重量約為20 KB，保留了其速度和靈活性，這使其比其他平臺(tái)具有更高的性能。
7. 由于使用了所有模板并提供了文檔，因此，大多數(shù)出現(xiàn)的問(wèn)題都得到了很快的解決。包括與React相比，由于在大多數(shù)不具有復(fù)雜接口的應(yīng)用程序中，該框架的全部功能有點(diǎn)多余。
8. Vue.js根據(jù)其簡(jiǎn)單的結(jié)構(gòu)，可以幫助開(kāi)發(fā)相當(dāng)大的可重用模板，而無(wú)需為此分配額外的時(shí)間即可制作出這些模板。
9. 幾乎所有對(duì)前端至少有點(diǎn)熟悉的開(kāi)發(fā)人員都能找到并連接到項(xiàng)目。較低的進(jìn)入門檻允許前端和后端開(kāi)發(fā)人員均可使用該框架。
10. Vue允許您創(chuàng)建滿足所有現(xiàn)代標(biāo)準(zhǔn)的功能應(yīng)用程序，并且只需最少的新資源連接，并且實(shí)際上更便宜。

VUE.JS缺點(diǎn)

與React.JS相比，還有一些缺點(diǎn)：

• 在應(yīng)用程序狀態(tài)下的工作是“幕后”。它增加了新開(kāi)發(fā)人員的入門門檻，但是對(duì)于我們的團(tuán)隊(duì)來(lái)說(shuō)，這并不是真正的劣勢(shì)。
• 與React或Angular相比，Vue.js的市場(chǎng)份額仍然很小，這意味著該框架下的知識(shí)共享仍處于起步階段。但是應(yīng)該指出的是，趨勢(shì)正在發(fā)生巨大變化，Vue的發(fā)展勢(shì)頭比其他框架要快得多。
• 由于Vue.js具有一定的中文基礎(chǔ)，因此許多元素和說(shuō)明仍然提供中文。這在開(kāi)發(fā)的某些階段會(huì)導(dǎo)致部分復(fù)雜，但是，越來(lái)越多的材料翻譯成英文。至于個(gè)人經(jīng)驗(yàn)，我們的團(tuán)隊(duì)在Vue的幫助下處理任何復(fù)雜的任務(wù)，并且在使用該框架時(shí)沒(méi)有遇到任何誤解。

盡管Vue.js的工作存在此類缺陷，但我們的開(kāi)發(fā)團(tuán)隊(duì)在處理技術(shù)方面擁有豐富的經(jīng)驗(yàn)，并且隨時(shí)準(zhǔn)備應(yīng)對(duì)任何復(fù)雜甚至是繁重的任務(wù)。

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

Angular和React有自己的做事方式，Vue相當(dāng)容易。許多公司都選擇Vue，因?yàn)樗子谑褂?。使用Angular或React開(kāi)發(fā)需要良好的JavaScript知識(shí)，并且您需要就第三方庫(kù)做出很多決定。

現(xiàn)在，如果我們?cè)谶@種情況下考慮我們的框架，Angular使用雙向數(shù)據(jù)綁定，React用于單數(shù)據(jù)流，而Vue支持兩者。

每個(gè)框架都有其優(yōu)缺點(diǎn)，這意味著在產(chǎn)品開(kāi)發(fā)過(guò)程中，每個(gè)案例都應(yīng)該有正確的選擇。