所謂生命周期鉤子函數(簡稱生命周期函數),指的是組件的創建、更新、銷毀三個階段所觸發執行的函數。根據每個階段觸發的鉤子函數,我們可以相應的做壹些操作,如獲取後端接口數據、監聽事件、執行事件、執行定時器、移除事件、清理定時器等等。
生命周期根據上面的三個階段分為:
實例化期/組件創建
“生存期”/組件更新
銷毀期/組件銷毀
beforeCreate:
在實例初始化之後,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
created:
在實例創建完成後被立即調用。在這壹步,實例已完成以下的配置:數據觀測 (data observer),屬性和方法的運算,watch/event 事件回調。然而,掛載階段還沒開始,屬性還不可見
beforeMount:
在掛載開始之前被調用:相關的 render 函數首次被調用。屬性已經可見,但還是原來的DOM,並非是新創建的。
mouted:
掛載到實例上去之後調用該鉤子。註意:mounted 不會把所有的子組件也都壹起被掛載。
beforeUpdate:
數據更新時,虛擬 DOM 變化之前調用,這裏適合在更新之前訪問現有的 DOM,比如手動移除已添加的事件監聽器。
updated:
數據更新和虛擬 DOM 變化之後調用。
當這個鉤子被調用時,組件 DOM 已經更新,所以妳現在可以執行依賴於 DOM 的操作。然而在大多數情況下,妳應該避免在此期間更改狀態。如果要相應狀態改變,通常最好使用計算屬性或 watcher 取而代之。
beforeDestroy:
實例銷毀之前調用,在這壹步,實例仍然完全可用。壹般在這裏移除事件監聽器、定時器等,避免內存泄漏
destroyed:
Vue 實例銷毀後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。