vue---生命週期

一 生命週期

含義:一個組件(實例) 從開始到最後消滅所經歷的各類狀態,就是一個組件(實例)的生命週期

注意

• 生命週期函數的命名都是vue規定好的,不要直接隨便改
• vue 在執行過程當中 會自動調用 生命週期鉤子函數, 咱們只須要提供這些函數就能夠了

官網這麼說,我信了-----你不須要立馬弄明白全部的東西，不過隨着你的不斷學習和使用，它的參考價值會愈來愈高。

三大階段

1掛載階段

數據響應

• beforeCreate:數據響應前調用,基本上沒什麼使用場景,這個函數調用的時候沒法拿到data和methods內的數據
• created:數據響應後調用,這個函數調用的時候已經能夠拿到實例中的data和methods內的數據了,因此在這個鉤子函數內咱們就能夠操到做data數據,發送ajax,獲取本地數據....(這個鉤子很重要聽說啊)

找模板

• 首先問你頁面中是否是有el,有的話就直接找到el劃定的邊界,沒有的話使用vm.$mount('#app')指定邊界
• 其次問你有沒有template,有直接使用template做爲模板進行編譯,沒有將el的outerHTML做爲模板進行編譯 ------通常vm實例都直接編譯el,組件內使用template編譯

渲染頁面

• beforeMount:數據渲染前調用,這個時候若是要獲取數據獲得的是帶有插值表達式,因此使用場景幾乎沒有
• mounted:數據渲染後調用,能夠獲取到正常渲染的數據,因此能夠在這個鉤子裏頭操做dom/發送ajax.........(重要重要)

2更新階段

注意並非data裏全部的數據發生變化,兩個鉤子函數就會調用,而是頁面用到數據,從新刷新頁面後纔會調用(watch)

• beforeupdate:數據更新前調用,獲取dom元素更新前的數據
• updated:數據更新後調用,獲取dom元素更新後的數據

3銷燬階段

注意 實例銷燬以前，執行清理任務，好比：清除定時器等

• beforeDestroy::實例銷燬前調用----->清除定時器
• destoryed:實例銷燬後調用

圖示來一張(不是我畫的圖)

------------------------------------這裏是待更新的分割線-----------------------------------