我想告訴你，我開始享受使用Vue.js和進行前端開發的故事。這不應該被理解為一篇關於為什麼Vue.js可能比React，Angular或任何你正在考慮的其他Web框架更好的文章。Vuejs是令人驚歎的，但我們生活在一個作為前端開發人員同樣令人驚歎的時代。

如果你幾年前和我交談過，我會把自己定位為一個後端開發人員，掌握伺服器和資料庫管理。物件導向的語言，java和c #，我想找到一種自己需要交付程式時使用的唯一的開發語言，我逐漸瞭解到更多關於.NET和SQL伺服器的堆疊技術。當時我有這樣一個概念，前端開發者只是使用右腦的附庸風雅的人，並不是“真正的”程式設計。

但是，在我最後一次求職，選擇很少。特別是工作面試，我看到了自己是如何失敗的。那次失敗非常令人沮喪，但我從中吸取了不少教訓。我獲得了一個職位，利用了我在SharePoint的經驗。我在SharePoint的經驗並不特別：用GUI、工作流等設計頁面這個不是我理想中的工作，而是為了生活不得不做的工作。

當我剛開始的時候，我接觸過像我過去做過的任何類似的專案。我依靠GUI設計使用者介面。幸運的是，使用資料庫的經驗使我能夠以規範化的方式設計列表，但似乎缺乏使用者介面方面的功能。在SharePoint設計器中，即使修改了底層ASP，某些效果也很難實現。

我和一個很棒的開發人員進行了討論，這真的觸動了我，於是我開始了進入前端框架的旅程。她說：“你知道…SharePoint支援REST服務。”啊，是的！我可以在SharePoint上使用Ajax，並根據響應情況建立我的HTML。這將是超級有趣的！

我們的第一次迭代的一個特定的應用**xmlhttprequests，**通過JavaScript函式構建HTML。這種方法的連線如此之多以至於我們的函式和字串變得越來越難維護。所以，我想知道這個問題是否有一個更好的通用的解決方案。

當然有！歡迎閱讀“Why you should use framework X”的視訊和部落格。在做了教程和觀看關於這個主題的辯論之後，我拒絕使用框架。畢竟，使用一個框架意味著每個人都必須變得聰明起來。然而，研究框架的過程中，我碰到Handlebars，模板引擎使用的Ember。

所以，我們做了任何明智的團隊都會做的事。我們重寫了專案使用該模板引擎。除了顯式呼叫編譯函式之外，這是一次不錯的體驗。最初的渲染完全沒有問題。不過，我們需要新增在專案列表中摺疊/展開某些項的能力。我的這個問題的第一種方法是給我的物件設定一個“visible”的屬性，當屬性的值發生了變化那麼就重新編譯模版。這意味著數百個元素必須根據變化重新渲染。我們利用jQuery來應用處理程式，它可以基於某些選擇器顯示/隱藏元素。

我覺得這很混亂。最終產品是功能性的，但是我能在一個月內完成程式碼並維護它嗎？可能需要一年？如果不費力氣的話。請允許我藉此機會說，可維護的程式碼寫了大量使用jQuery和Handlebars。在這一點上，我沒有能力把它搞到位。

所以，我就想回去研究一下可用的框架。有這麼多好的框架可選，但我們有一個獨特的環境。我們不能使用node。沒有NPM，沒有工具被大量使用在每一個框架。我們得出的結論是，在瀏覽器中執行Babel也會降低效能。考慮到這些條件，React、Ember和Angular2 +是不可行的選項。

我們沒有認真考慮AngularJS（1）。我已經用它實現了另一個專案，但它已不被官方支援了，並且vue.js剛剛釋出了V2版本和一個清晰的在瀏覽器使用的路徑。它會繼續受到歡迎，並且有可用的工具。所以，如果我們不失時機的使用它，包括一個它提供的工具時，我們也就決定支援它了。

為什麼是Vue.js，好玩嗎？

許多我所給的原因可以歸因於Vue的替代品。

模板

最初使我對vue.js感興趣的是模板。使用一些花括號，我可以根據JavaScript訪問的變數將值插入到提交內容中。通過模板的使用等於提供了一個路徑，Vue.js DOM和元件模板更容易被使用。另外，沒有太關注在IE9 +使用vue.js，而IE不支援模板。

響應性

事實上，我可以對我們的模型進行更改，它會自動更新頁面上的內容，這也是為什麼讓我覺得angular.js好用的原因。類似的原來“ng-model”模型，vue.js提供了一個“V”的指令可以很容易的把輸入內容顯示出來。使用watchers，這種響應擴充套件到執行操作不一定與頁面上發生的事情相關。

元件

雖然你不使用元件也可以利用Vue的響應和模板，但元件化的體系結構的實現是真的很有趣。學習如何將行為封裝到元件中是很有趣的，它使我能夠高效地分割程式碼。類似於生活在C #世界在哪裡類需要做的太多了，我意識到當一個元件可能做的太多了。這種做法在某種程度上激發了智力，刺激了程式設計時的感覺。

為什麼覺得前端這麼有趣？

作為一個孩子，我的夢想就是程式設計。確切地說是什麼？桌面應用程式和遊戲。當我開始從事真正的程式設計工作時，我真的很想從事那種我的工作使別人很受益的。我不知道你，但直到最近，我有一個先入為主的概念“真正的程式設計師”層次結構，看起來像是這樣。

• 真正的程式設計師

• 作業系統/核心程式設計師

• 桌面應用程式

• 遊戲程式設計師

• 後端網路程式設計師

• 前端網路程式設計師

• SharePoint /銷售人員/其他平臺程式設計師

• 微軟Office（Access / Excel）程式設計師

• 不是真正的程式設計師

這種想法真的讓我覺得自己是個做後臺的人，更不用說前端了。在很長很長的一段時間裡，甚至在許多地方，前端和後臺兩者都是同一個人來做。這導致了對前端較少關注，導致產生了很多低質量的站點。隨後，公司開始僱用前端的人，以美元為單位得到他們的費用。這份工作名聲不太好，我不想和那個名聲有任何關係。

然而，如前所述，我發現自己處於一個需要依靠前端滿足需求的尷尬位置。令我驚訝的是，瀏覽器的程式設計不僅有趣，而且功能齊全。

瀏覽器的能力

我總是驚訝於瀏覽器能處理什麼。即使是可憐的老Internet Explorer，也可以在不呼叫伺服器的情況下處理讀取、解析和建立Excel檔案。畫布和SVG給我們兩個超級有用的方法來創造美麗和動態的影像/動畫。使用Ajax，我們可以建立週期性地、無縫地向使用者更新的動態內容。

分享就是快樂

在客戶端開發時如果沒有隱藏你的原始碼。它在那裡讓世界都可以看到。所以，也不震驚，JavaScript的專案在很大程度體現在GitHub上。此外，許多專案是麻省理工學院，Apache，或其他許可非常友好。**Score!**來自令人敬畏的人的貢獻幫助我以更快、更有意義的方式為我的公司做出貢獻。

即時滿足

與桌面應用程式開發類似，我們常常以視覺化的方式看到程式碼的影響。我們可以使用CSS和視覺上有吸引力的站點的一點天賦，來改善我們作為開發者在我們的老闆和使用者中的印象。再加上一個視覺框架Twitter的Bootstrap或者Bulma，我們真的可以減少時間而增加一些吸引力。

Write Once Run Everywhere

舊的java web開發說跑起來比java本身要更真實。使程式碼相容多個瀏覽器和針對不同螢幕大小的佈局同樣面臨挑戰。這些挑戰本身很有趣，因為這讓我們瞭解了各種平臺。

JavaScript

JavaScript繼續以極快的速度發展，但它是一種非常有趣的語言。從“= =”和“= = =”差異中體會函式處理類原型繼承功能的程式設計方法，學習這種語言已經超好玩。能夠將新的功能Babel到我的網站（專案）就更是屌爆了一樣。

總結一下

作為前端Web開發人員，我可以與職場中的優秀人員一起工作，並在更大的開發人員社群中獲得對我想法的反饋。你為什麼喜歡前端開發？你覺得Vue.js怎麼樣？

感謝閱讀！

Denny Headrick是一個Web開發者，他喜歡的工作方式太多。在各種頂級平臺上進行Vue.js討論的時候可以看到他，他喜歡偶爾部落格一下。你可以跟他推特@dennythecoder。

匯智網小智翻譯（小智工作的網站，歡迎大家吐槽 ！ www.hubwiz.com）

我也分享個 vue.js 全家桶課程：

1. vue.js 入門與提高 http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99?affid=20180319oschina
2. vuex 2 入門與提高 http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a?affid=20180319oschina
3. vue-router 入門與提高 http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50?affid=20180319oschina
4. vue.js 工程化實踐 http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid=20180319oschina