地址:https://www.jianshu.com/p/5cd198945d41
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為渲染。在這個周期里面如果進行請求是可以改變數據並渲染,由於DOM未掛載,請求過多或者占用時間過長會導致頁面線上空白。
beforeMount
DOM未完成掛載,數據也初始化完成,但是數據的雙向綁定還是顯示{{}},這是因為Vue采用了Virtual DOM(虛擬Dom)技術。先占住了一個坑。
mounted
數據和DOM都完成掛載,在上一個周期占位的數據把值給渲染進去。一般請求會放在這個地方,因為這邊請求改變數據之后剛好能渲染。
beforeUpdate
只要是頁面數據改變了都會觸發,數據更新之前,頁面數據還是原來的數據,當你請求賦值一個數據的時候會執行這個周期,如果沒有數據改變不執行。
updated
只要是頁面數據改變了都會觸發,數據更新完畢,頁面的數據是更新完成的。beforeUpdate和updated要謹慎使用,因為頁面更新數據的時候都會觸發,在這里操作數據很影響性能和容易死循環。
beforeDestroy
這個周期是在組件銷毀之前執行,在我項目開發中,覺得這個其實有點類似路由鈎子beforeRouterLeave,都是在路由離開的時候執行,只不過beforeDestroy無法阻止路由跳轉,但是可以做一些路由離開的時候操作,因為這個周期里面還可以使用data和method。比如一個倒計時組件,如果在路由跳轉的時候沒有清除,這個定時器還是在的,這時候就可以在這個里面清除計時器。
Destroyed
說實在的,我還真的不知道這個周期跟beforeDestroy有什么區別,我在這個周期里面調用data的數據和methods的方法都能調用,所以我會覺得跟beforeDestroy是一樣的。