Vue生命週期

Vue在GitHub上面的star數量已經超過了react，雖然npm包下載的數量尚未react多，可是Vue上升的勢頭真的很猛。

Vue生命週期2.0和1.0差異仍是有一點的，生命週期的博客文章百度也是不少，今天我簡單提一下生命週期，而後說一下一些可能比較沒人注意的點。

先上Vue官網的生命週期圖片：

---

先羅列出生命週期而後一個一個講解

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

beforeCreate

實例組件剛建立，元素DOM和數據都尚未初始化，暫時不知道能在這個週期裏面進行生命操做。

created

數據data已經初始化完成，方法也已經能夠調用，可是DOM未渲染。有人問了，請求都是異步的，並不會阻礙實例加載。這是我我的水平的問題，這邊改正，在這個週期裏面，請求由於是異步的，不會阻礙實例加載，除非是那些同步操走纔會致使頁面空白。這樣說來，在這個週期裏面進行請求，渲染速度反而會更快。

beforeMount

DOM未完成掛載，數據也初始化完成，可是數據的雙向綁定仍是顯示{{}}，這是由於Vue採用了Virtual DOM（虛擬Dom）技術。先佔住了一個坑。

mounted

數據和DOM都完成掛載，在上一個週期佔位的數據把值給渲染進去。能夠在這邊請求，不過created請求會更好一些。這個週期適合執行初始化須要操做DOM的方法。

beforeUpdate

只要是頁面數據改變了都會觸發，數據更新以前，頁面數據仍是原來的數據，當你請求賦值一個數據的時候會執行這個週期，若是沒有數據改變不執行。

updated

只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的。beforeUpdate和updated要謹慎使用，由於頁面更新數據的時候都會觸發，在這裏操做數據很影響性能和容易死循環。

beforeDestroy

這個週期是在組件銷燬以前執行，在我項目開發中，以爲這個其實有點相似路由鉤子beforeRouterLeave,都是在路由離開的時候執行，只不過beforeDestroy沒法阻止路由跳轉，可是能夠作一些路由離開的時候操做，由於這個週期裏面還可使用data和method。好比一個倒計時組件，若是在路由跳轉的時候沒有清除，這個定時器仍是在的，這時候就能夠在這個裏面清除計時器。

Destroyed

說實在的，我還真的不知道這個週期跟beforeDestroy有什麼區別，我在這個週期裏面調用data的數據和methods的方法都能調用，因此我會以爲跟beforeDestroy是同樣的。