最近在某個項目中用到了Vue.js,從上手做開發到項目釋出，一步步踩了不少坑。本文試圖總結過去一個多月使用Vue.js中的一些經驗，也算是一點心得體會吧，拿出來與大家分享，歡迎多多交流。
Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.
這是來自Vue.js官網的解釋，這裡我們不打算再照本宣科的把概念翻譯一邊了，僅就作者使用Vue.js的心得體會來做出解釋。熟悉ReactJS或者Angular的讀者可能對此并不陌生。
Vue.js與ReactJS、AngularJS這些架構一樣都持有相同的開發理念，通過擴充原生的HTML等結構化标簽來作為其模版語言，此外進一步通過文法上的擴充提供了諸如雙向資料綁定、互動資料模型等概念，進而使開發者從繁雜的DOM操作中解脫出來，将更多的精力用于關注業務本身的内容。
此外，與React類似的是，均提出了包括虛拟DOM群組件化開發的理念，進而提高了代碼的可維護性和性能。Vue.js試圖用一種極簡的方式來實作以上這些架構帶來的優勢，是以，相比于React和Angular來說，Vue.js更加輕量、簡介和優美。
下面，在進一步探究Vue.js之前，我們先看一下Vue.js的幾個核心概念。
元件化開發是最近兩三年比較火的概念。通過使用Vue.js來建立的元件，就像建構萬丈高樓的磚塊一樣，擁有良好的封裝性和複用性。每一個元件都擁有其獨立的樣式和資料域，并且完全與其它元件完全隔離。簡單的講，任何前端的界面都可以通過合理的規劃，劃分成擁有不同職責的元件。 關于元件化開發的概念我們不再進一步展開，感興趣的同學可以進一步閱讀這篇文章前端工程-基礎篇。
正如你所知，Vue.js的核心部分僅保留了包括資料綁定及元件化開發相關的内容。是以才保證了其極簡的機制。此外，對于附加的功能也提供了高效靈活的插件化機制。對于大家耳熟能詳的插件包括vue-router、vee-validator、vue-touch等。此外，也提供了允許開發者自己封裝元件的機制。進而使你能更有效地抽象某些功能，為團隊開發所用。例如，你可以将有關資料計算的邏輯抽象為獨立的插件，提供給團隊的人使用等。
如果你的項目非常簡介，沒有複雜的邏輯，那麼你完全沒必要引入vuex。vuex是用來在應用各個組建之間管理和共享應用state的子產品，如果你使用過React那麼你應該對Flux不陌生，vuex起到的作用與此類似。
Vue.js也提供了非常高效的指令行工具，通過使用幾個簡單的指令就能快速建構基于Vue.js的元件和應用，極大的減少了開發者的工作量，将開發者從繁雜的重複性的勞動中解放出來。關于vue-cli，我們不再展開，讀者可以閱讀vue-cli進一步了解vue-cli的功能。
Vue.js提供了包括v-for、v-if、v-show、v-bind、v-model、v-on、v-html等内部指令，這裡不再細說每一個指令的用法，讀者可以自行參考文檔。
需要說明的是v-if和v-show的不同，v-show是通過更改DOM元素的display屬性來實作隐藏與否的，而與v-show不同的是，v-if是通過完全移除DOM元素來實作隐藏與否的。是以，如果你的隐藏内容的确需要反複，那麼使用v-show，這樣性能更好。
v-bind與v-model不同的是，v-model是雙向資料綁定，而v-bind是單向綁定的。
v-for使用的時候，最好提供一個key給vue.js。
父元件通過props傳遞資料到子元件 ，子元件通過events來傳遞資料改變到父元件。對于簡單的資料修改，可以通過這種方式實作。但是對于複雜的資料邏輯，建議通過vuex來管理。例如：父元件傳遞title到子元件：
子元件傳遞修改到父元件,通過事件
對于全局性的state，可以通過vuex來封裝。例如使用者登入資訊，全局都用到的常量資訊等。對于vuex的内容比較多，大家可以看這裡。vuex api。
Vue.js提供了一套完整的元件的生命周期鈎子方法，你可以在元件的生命周期的各個階段做該做的事情。其完整的生命周期的方法圖示如下：
前端開發不可避免的就是前後端互動，這裡非常推薦vue-resource。建議将涉及到前後端互動的所有API放在一個獨立的api.js檔案當中，友善管理。然後在需要接口的地方導入對應的方法即可。下面是一個示例：
vue-router是基于vue.js用來解決前端路由的方案。vue-router提供了包括動态路由等功能。這裡也給出一個示例：
示例中的blog可以知，我們可以傳遞id參數并且在元件中過去id。此外，我們可以傳遞多個參數，如<code>’/blog/:blogID/:postId’</code>等。這裡建議不要超過2個，因為傳遞的越來越多，就不再友善管理了。
作者在使用vue.js的過程中反複遇到過一個問題，就是元件重新整理的問題。例如，作者的項目當中有用到菜單，打開不同的菜單對應不同的路由群組件。而如果在目前元件中，再次點選打開目前元件的菜單，則元件并不會重新整理。
這就導緻一個頭疼的問題，因為使用者點選菜單本身就是想重新整理目前頁面，而元件的資料并沒有重新整理，是以就看不到最新的資料。解決思路就是，在元件路由裡增加了一個時間參數，然後在元件當中增加了對這個時間參數的watch。具體是實作如下：
亂七八糟的寫了很多，也算是對這段時間用vue.js的一個回顧。不得不承認，在使用vue.js的過程當中開始逐漸喜歡上了這個優美而簡潔的架構。是以也願意跟更多的人分享使用它的經驗。也歡迎大家一起交流。
Vue.js官網
《Learning Vue.js》
在元件不變的情況下和url不變的情況下重新整理視圖
其它參考資料