Vue上手總結

公司最近搞vue遷移，遷移了一個模塊，大概10天多點。基本瞭解了vue使用，vuex使用流程。 一開始寫 不太熟練，走了很多彎路，以後越寫越順。整體來講vue仍是三大框架中最簡單的（Vue，React，Angular），並且在國內Vue十分火爆。

Vue

1.Vue生命週期

生命週期挺重要，不一樣生命週期時，this所含有的屬性是不同的，大體順序就是：

beforeCreate （無data 無methods）
|（加載定義的data）
|（初始化定義的事件methods）
created
| （判斷組件是否掛載）
beforeMount （掛載以前 這時候模板什麼的都還未渲染template，進入頁面的ajax放在這）
|（渲染模板）
mount（掛在完成 模板完成首次渲染）
|（觸發頁面destroy）
beforeDestroy （）
| （卸載組件，watcher，子組件，事件等）
destroyed（組件銷燬完畢）

在個人平常開發中，常常用到的就是beforeMount這個hook。常常會遇到一個場景，詳情頁進入的時候，去ajax獲取數據拿到以後，再渲染頁面。在React中ajax是寫在componentWillmount函數中。
Vue跟React差很少，都是在組件掛載以前執行ajax。

其餘的函數暫時還沒用到，不過根據經驗，一些自定義的事件監聽，好比自定義訂閱者模式，要在beforeDestroy這裏取消訂閱。這裏還有data更改的時候，觸發從新渲染的兩個生命週期函數沒寫，瞭解下就好。

2.模板

vue學習了Angular的自帶模板
相對於React須要js輸出DOM，vue的模板對於不少從Angular，或者jquery轉過來的人比較容易上手。可是Vue也能夠像React同樣Render模板，暫時沒有複雜場景用到。
但是我還以爲React輸出DOM的方式比較靈活可控。

vue官方文檔中介紹的內容就不說了，說些本身的遭遇。
變量使用：vue模板默認指向對於的組件，因此 this.data，在模板中直接寫data就能夠，$store $router都是一個意思。

• 動態傳值：當向一個組件或html傳遞一個可變的值時，須要使用 v-bind:xxx=""，v-bind:xxx=""簡寫成:xxx=""引號內的屬於JS編譯範圍，再也不是純字符串。

• 計算屬性：這個是個不錯的東西，computed屬性跟data是平級的，是屬性不是方法。定義的一個方法 輸出一個值，當依賴的數據不變的時候，該方法就不被執行。

• v-bind:class：vue綁定class相對於React簡單了不少，吸收了classnames插件的特色，一個固定class和動態class寫成v-bind:class="['application', {'show': item.jobApplicationId}]"

• 條件渲染：確實很方便。

• 列表渲染：也很方便。

• 綁定事件：當向一個組件或html傳遞一個可變的值時，使用v-on:click="do"寫法 簡寫成@click="do" 若是do函數須要傳值 寫成@click="do(1,2)"便可。另外vue的事件修飾符很方便，多用用。vue組件中的事件都是vue封裝過得事件，有一些彩蛋屬性，能夠多瞭解。
  自定義組件：這裏仍是強調單項數據流，子組件不可更改props，否則會報錯。

3.響應式原理

常常會用到一個場景，data中定義了一個 obj = {a: 1, b: 2};a b 兩個屬性均是響應的。一旦更改，全部引用的地方都會跟着改變。可是某處使用 obj.c = 3 這時候c就不是相應的。原理文檔中說的很清楚。解決辦法就是 this.$set(this, 'obj', 3)這樣給obj添加一個響應式屬性

Vuex

1.使用場景

對於數據量很大的常見或者數據復、雜交互複雜，多個組件須要共享一些數據的時候，vuex仍是須要的。
可是一些簡單的業務，使用vuex就複雜了。

2.操做順序

1. 首先vuex須要存儲數據的時候，須要在vuex中的state中定義該屬性。當須要vuex中的數據的時候，要有對應的getter，而後組件mapGetters對應getter。

2. 更改數據的時候，在action中發ajax。處理數據後，commit到mutations中，getter會自動更新數據。

這裏要說下我踩過的坑：
vue組件是能夠調用三層中的任何一層
this.$store.dispatch()
this.$store.commit()
this.$store.getters()
沒必要徹底按照順序調用。

action層：每一個action方法，都應該返回一個Promise對象，這個Promise業務層能夠直接拿到。 因此業務的ajax應該放到action層中，回調函數放在業務層。這樣業務跟數據分離。

三 組件庫

element UI

原本想寫點router的，發現跟react-router同樣，都是常規的前端路由沒什麼可寫的。
咱們選用了餓了麼的組件庫，業務內大量使用。他們的組件基本覆蓋了平常用到全部組件，基本能知足大多業務需求。可是他們的組件仍是有一些bug注意點爲好。並且github上好多issue，由於格式不對就被關掉了 黑人問號 ？？？
可是整體上仍是能夠知足業務的，交互還好。
差點忘了表單驗證太難用了，還有bug！我都是本身寫的。

四 總結

總的來講，vue相對於React比較簡單了，開發效率也高了起來。仍是寫的多了，瞭解的就多了。另外國內vue比較火爆，國外仍然是react比較多。多保持些技術棧多些見識。