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

詳細(xì)說(shuō)明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.activated（激活）：在組件被激活時(shí)調(diào)用。當(dāng)一個(gè)組件被復(fù)用時(shí)，例如在一個(gè) <keep-alive> 標(biāo)簽中，這個(gè)鉤子會(huì)被調(diào)用。

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

8.deactivated（停用）：在組件被停用時(shí)調(diào)用。當(dāng)一個(gè)組件離開(kāi) <keep-alive> 標(biāo)簽時(shí)，這個(gè)鉤子會(huì)被調(diào)用。

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

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

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

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

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

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

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

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

最新評(píng)論