以下是 Vue 生命周期鉤子函數(shù)分別做了什么事情的詳細說明

詳細說明

1.beforeCreate（創(chuàng)建前）：在實例初始化之前調(diào)用。此時，實例的數(shù)據(jù)觀測 (data observer)、屬性和方法的運算，以及事件配置等內(nèi)部設置都已完成，但是尚未掛載到 DOM 上。在這個鉤子中，我們可以進行一些數(shù)據(jù)獲取或者變量聲明等準備工作。

2.created（創(chuàng)建后）：在實例創(chuàng)建完成后立即被調(diào)用。在這一步，實例已經(jīng)完成了以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算，watch/event listener 都已經(jīng)初始化，但還沒有掛載到 DOM 上。在這個鉤子中，我們可以進行一些組件內(nèi)數(shù)據(jù)的初始化操作。

3.beforeMount（載入前）：在組件掛載之前調(diào)用。在這一步，Vue 實例已經(jīng)編譯模板，但是還沒有掛載到 DOM 上。在這個鉤子中，我們可以進行一些組件內(nèi)數(shù)據(jù)的計算或者處理等準備工作。

4.mounted（載入后）：在組件掛載之后調(diào)用。在這一步，Vue 實例已經(jīng)將模板編譯成的虛擬 DOM 渲染到實際的 DOM 上。在這個鉤子中，我們可以進行一些頁面元素的初始化或者綁定等操作。

5.beforeUpdate（更新前）：在數(shù)據(jù)更新之前調(diào)用。在這一步，Vue 實例的數(shù)據(jù)已經(jīng)更新，但是虛擬 DOM 還沒有重新渲染。在這個鉤子中，我們可以進行一些數(shù)據(jù)校驗或者條件判斷等操作。

6.updated（更新后）：在數(shù)據(jù)更新之后調(diào)用。在這一步，Vue 實例的數(shù)據(jù)已經(jīng)更新，虛擬 DOM 也已經(jīng)重新渲染。在這個鉤子中，我們可以進行一些頁面元素的更新或者刷新等操作。

7.activated（激活）：在組件被激活時調(diào)用。當一個組件被復用時，例如在一個 <keep-alive> 標簽中，這個鉤子會被調(diào)用。在這個鉤子中，我們可以進行一些組件的激活狀態(tài)設置或者數(shù)據(jù)恢復等操作。

8.deactivated（停用）：在組件被停用時調(diào)用。當一個組件離開 <keep-alive> 標簽時，這個鉤子會被調(diào)用。在這個鉤子中，我們可以進行一些組件的停用狀態(tài)設置或者數(shù)據(jù)保存等操作。

9.beforeDestroy（銷毀前）：在實例銷毀之前調(diào)用。此時，實例仍然完全可用。在這個鉤子中，我們可以進行一些資源釋放或者清理工作等操作。

10.destroyed（銷毀后）：在實例銷毀之后調(diào)用。此時，所有的子實例、事件監(jiān)聽器和事件發(fā)射器都會被清理掉。在這個鉤子中，我們不需要再進行任何操作。

11.errorCaptured（錯誤捕獲）：當捕獲到一個來自子孫組件的錯誤時調(diào)用。這個鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及完整的錯誤堆棧信息。在這個鉤子中，我們可以進行一些錯誤處理或者日志記錄等操作。

Vue 生命周期鉤子函數(shù)示例

1.beforeCreate（創(chuàng)建前）：在實例初始化之前調(diào)用。此時，實例的數(shù)據(jù)觀測 (data observer)、屬性和方法的運算，以及事件配置等內(nèi)部設置都已完成，但是尚未掛載到 DOM 上。

beforeCreate() {
  console.log('beforeCreate');
}

2.created（創(chuàng)建后）：在實例創(chuàng)建完成后立即被調(diào)用。在這一步，實例已經(jīng)完成了以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算，watch/event listener 都已經(jīng)初始化，但還沒有掛載到 DOM 上。

created() {
  console.log('created');
}

3.beforeMount（載入前）：在組件掛載之前調(diào)用。在這一步，Vue 實例已經(jīng)編譯模板，但是還沒有掛載到 DOM 上。

beforeMount() {
  console.log('beforeMount');
}

4.mounted（載入后）：在組件掛載之后調(diào)用。在這一步，Vue 實例已經(jīng)將模板編譯成的虛擬 DOM 渲染到實際的 DOM 上。

mounted() {
  console.log('mounted');
}

5.beforeUpdate（更新前）：在數(shù)據(jù)更新之前調(diào)用。在這一步，Vue 實例的數(shù)據(jù)已經(jīng)更新，但是虛擬 DOM 還沒有重新渲染。

beforeUpdate() {
  console.log('beforeUpdate');
}

6.updated（更新后）：在數(shù)據(jù)更新之后調(diào)用。在這一步，Vue 實例的數(shù)據(jù)已經(jīng)更新，虛擬 DOM 也已經(jīng)重新渲染。

updated() {
  console.log('updated');
}

7.activated（激活）：在組件被激活時調(diào)用。當一個組件被復用時，例如在一個 <keep-alive> 標簽中，這個鉤子會被調(diào)用。

activated() {
  console.log('activated');
}

8.deactivated（停用）：在組件被停用時調(diào)用。當一個組件離開 <keep-alive> 標簽時，這個鉤子會被調(diào)用。

deactivated() {
  console.log('deactivated');
}

9.beforeDestroy（銷毀前）：在實例銷毀之前調(diào)用。此時，實例仍然完全可用。

beforeDestroy() {
  console.log('beforeDestroy');
}

10.destroyed（銷毀后）：在實例銷毀之后調(diào)用。此時，所有的子實例、事件監(jiān)聽器和事件發(fā)射器都會被清理掉。

destroyed() {
  console.log('destroyed');
}

11.errorCaptured（錯誤捕獲）：當捕獲到一個來自子孫組件的錯誤時調(diào)用。這個鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及完整的錯誤堆棧信息。

errorCaptured(err, instance, info) {
  console.log('errorCaptured', err, instance, info);
}

到此這篇關于詳解Vue中生命周期鉤子函數(shù)的使用示例的文章就介紹到這了,更多相關Vue生命周期鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論