vue生命周期函數


地址: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是一樣的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM