一、Vue 生命周期
Vue的生命周期即是實例從創建到銷毀的一個過程。之前在學習Vue的時候,看過官網的教程,但是經常用到的是mounted,所以對其他生命周期方法不是很熟悉,這里有空做個總結,也方便以后查閱。
二、Vue生命周期方法
主要方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,Destroyed。還有兩個不常用的actived,deactivated,這兩個方法用於被<keep-alive></keep-alive>
包裹的動態組件。使用<keep-alive></keep-alive>
組件包裹的話,則涉及到頁面緩存。下面開始一一介紹每個生命周期方法。
1.beforeCreate
在實例初始化之后,在數據觀測(data observer)和event/watcher事件配置之前被調用,此時data和$el都沒有初始化,全部為undefined。
可以在此時加一些loading效果,然后在created移除,可以用在進入請求時間較長的頁面,給用戶提示,提高用戶體驗。
2.created
在實例創建完成后立即被調用,在這一步,實例已完成以下配置:數據觀測(data observer),屬性和方法的運算,watch/event事件回調,然而掛載階段還沒開始,$el屬性目前不可見。
3.beforeMount
在掛載開始之前被調用:相關的render函數首次被調用。此時,data和$el都已經存在,但是DOM為虛擬DOM,仍然沒有被加載完。
4.mounted
el被新創建的vm.$el所替換,並掛載到實例上去調用該鈎子。這時候可以執行異步請求,請求數據初始化頁面。
此時data和$el都已經存在,DOM也已經加載完成,完成掛載。
5.beforeUpdate
當data中的數據發生改變時,在變化的數據重新渲染視圖之前觸發。
6.updated
檢測到數據發生變化時,變化的數據重新渲染視圖之后觸發。
7.beforeDestroy
實例銷毀之前調用,此時實例仍然可用。
8.destroyed
實例銷毀之后調用,調用后,Vue實例指示的所有東西都會解綁定,所有的事件監聽器都被移除,所有的子實例也會被銷毀。
9.activated
keep-alive 組件激活時調用
10.deactivated
keep-alive 組件停用時調用