Vue中activated和deactivated生命周期鉤子在keep-alive組件中的使用詳解
Vue activated和deactivated生命周期鉤子在keep-alive中的作用
在Vue里，keep-alive 組件就像是一個“記憶寶盒”，它能把組件的狀態(tài)保存起來，避免組件在切換時反復(fù)創(chuàng)建和銷毀，這樣可以大大提升性能。而 activated 和 deactivated 這兩個生命周期鉤子，就像是“記憶寶盒”的開關(guān)助手，在組件進(jìn)入和離開這個“寶盒”時發(fā)揮著重要作用。
1.activated生命周期鉤子
當(dāng)使用 keep-alive 包裹的組件被激活（也就是重新顯示在頁面上）時，activated 鉤子就會被觸發(fā)。這就好比一個人從沉睡中被喚醒，要開始干活了。下面是一個簡單的例子：
<template>
<!-- 這是組件的模板部分 -->
<div>
<h1>這是一個被 keep-alive 包裹的組件</h1>
</div>
</template>
<script>
export default {
// 組件被激活時觸發(fā)的鉤子函數(shù)
activated() {
// 這里可以寫一些組件被激活時要執(zhí)行的代碼，比如重新獲取數(shù)據(jù)
console.log('組件被激活啦！');
// 可以在這里發(fā)送請求獲取最新的數(shù)據(jù)
// this.fetchData();
},
methods: {
// 模擬獲取數(shù)據(jù)的方法
fetchData() {
console.log('正在獲取數(shù)據(jù)...');
}
}
}
</script>
在這個例子中，當(dāng)這個組件被激活時，控制臺就會輸出“組件被激活啦！”，你還可以在 activated 鉤子中調(diào)用 fetchData 方法去重新獲取最新的數(shù)據(jù)。
2.deactivated生命周期鉤子
當(dāng)使用 keep-alive 包裹的組件被停用（也就是從頁面上隱藏）時，deactivated 鉤子就會被觸發(fā)。這就好比一個人要去休息了，得把手上的活先停下來。下面是對應(yīng)的例子：
<template>
<!-- 這是組件的模板部分 -->
<div>
<h1>這是一個被 keep-alive 包裹的組件</h1>
</div>
</template>
<script>
export default {
// 組件被停用（隱藏）時觸發(fā)的鉤子函數(shù)
deactivated() {
// 這里可以寫一些組件被停用時要執(zhí)行的代碼，比如停止定時器
console.log('組件被停用啦！');
// 可以在這里清除定時器
// clearInterval(this.timer);
},
data() {
return {
// 模擬一個定時器
timer: null
};
},
mounted() {
// 在組件掛載時啟動定時器
this.timer = setInterval(() => {
console.log('定時器在運行...');
}, 1000);
}
}
</script>
在這個例子中，當(dāng)組件被停用（隱藏）時，控制臺會輸出“組件被停用啦！”，你還可以在 deactivated 鉤子中清除定時器，避免不必要的資源浪費。
3. 結(jié)合keep-alive使用的完整示例
下面是一個完整的示例，展示了如何在 keep-alive 中使用 activated 和 deactivated 鉤子：
<template>
<div>
<!-- 這里使用 keep-alive 包裹組件 -->
<keep-alive>
<!-- 通過 v-if 控制組件的顯示和隱藏 -->
<component-a v-if="showComponentA"></component-a>
<component-b v-else></component-b>
</keep-alive>
<!-- 切換組件的按鈕 -->
<button @click="toggleComponent">切換組件</button>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
// 控制組件 A 是否顯示
showComponentA: true
};
},
methods: {
// 切換組件的方法
toggleComponent() {
this.showComponentA = !this.showComponentA;
}
}
}
</script>
在 ComponentA.vue 和 ComponentB.vue 中，你可以分別定義 activated 和 deactivated 鉤子，來處理組件激活和停用的邏輯。
總結(jié)一下，activated 和 deactivated 這兩個生命周期鉤子在 keep-alive 組件中非常有用，它們能讓你在組件進(jìn)入和離開“記憶寶盒”時，靈活地執(zhí)行一些必要的操作，提升應(yīng)用的性能和用戶體驗。
解釋一下Vue中created和mounted生命周期鉤子函數(shù)的作用
在Vue.js里，生命周期鉤子函數(shù)就像是一場戲劇中的各個關(guān)鍵場次，每個鉤子都有其獨特的作用，在特定的時間點被觸發(fā)。
created 和 mounted 這兩個生命周期鉤子函數(shù)在Vue組件的生命周期中扮演著重要角色，下面來詳細(xì)解釋它們的作用。
1.created生命周期鉤子函數(shù)
created 鉤子函數(shù)會在Vue實例已經(jīng)創(chuàng)建完成之后被立即調(diào)用。在這個階段，實例已經(jīng)完成了數(shù)據(jù)觀測、property 和 method 的計算、watch/event 事件回調(diào)的配置等。然而，掛載階段還沒有開始，$el 屬性目前不可用。
可以把 created 階段想象成戲劇的籌備階段，演員（數(shù)據(jù)和方法）都已經(jīng)就位，但舞臺（DOM）還沒搭建好。這個階段適合進(jìn)行一些數(shù)據(jù)的初始化操作，比如發(fā)送HTTP請求來獲取數(shù)據(jù)。
以下是一個簡單的示例：
<template>
<div>
<!-- 這里展示從接口獲取的數(shù)據(jù) -->
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
// 定義一個變量來存儲從接口獲取的數(shù)據(jù)
message: ''
};
},
created() {
// 在 created 鉤子中發(fā)送請求獲取數(shù)據(jù)
console.log('組件已創(chuàng)建，開始獲取數(shù)據(jù)...');
// 模擬一個異步請求
setTimeout(() => {
this.message = '這是從接口獲取的數(shù)據(jù)';
}, 1000);
}
};
</script>
在這個例子中，created 鉤子函數(shù)被觸發(fā)后，會模擬一個異步請求去獲取數(shù)據(jù)，并將數(shù)據(jù)賦值給 message 變量。由于這個階段數(shù)據(jù)觀測已經(jīng)完成，當(dāng)數(shù)據(jù)更新時，Vue會自動更新DOM。
2.mounted生命周期鉤子函數(shù)
mounted 鉤子函數(shù)在掛載完成后被調(diào)用，也就是Vue實例已經(jīng)將其模板渲染成真實的DOM并插入到頁面中。此時，$el 屬性已經(jīng)可用，可以直接訪問DOM元素。
可以把 mounted 階段想象成戲劇正式開演，舞臺（DOM）已經(jīng)搭建好，演員（數(shù)據(jù)和方法）可以在上面盡情表演了。這個階段適合進(jìn)行一些需要操作DOM的初始化工作，比如初始化第三方插件。
以下是一個示例：
<template>
<div>
<!-- 這里有一個需要初始化的 DOM 元素 -->
<div id="my-element">這是一個需要初始化的元素</div>
</div>
</template>
<script>
export default {
mounted() {
// 在 mounted 鉤子中操作 DOM
console.log('組件已掛載，開始操作 DOM...');
const element = document.getElementById('my-element');
// 修改 DOM 元素的樣式
element.style.color = 'red';
}
};
</script>
在這個例子中，mounted 鉤子函數(shù)被觸發(fā)后，會獲取 id 為 my-element 的DOM元素，并將其文字顏色修改為紅色。因為在這個階段，DOM已經(jīng)渲染完成，所以可以安全地進(jìn)行DOM操作。
3.created和mounted的區(qū)別和使用場景總結(jié)
區(qū)別：
created階段主要是數(shù)據(jù)的初始化，此時DOM還未渲染，不能進(jìn)行DOM操作。mounted階段DOM已經(jīng)渲染完成，可以進(jìn)行DOM操作。
使用場景：
created適合進(jìn)行數(shù)據(jù)的初始化，如發(fā)送HTTP請求獲取數(shù)據(jù)、初始化全局變量等。mounted適合進(jìn)行需要操作DOM的初始化工作，如初始化第三方插件、綁定事件監(jiān)聽器等。
通過合理使用 created 和 mounted 生命周期鉤子函數(shù)，可以更好地控制組件的初始化過程，提升應(yīng)用的性能和用戶體驗。
Vue中還有哪些常用的生命周期鉤子函數(shù)？
除了 created 和 mounted，Vue里還有不少常用的生命周期鉤子函數(shù)，它們在組件生命周期的不同階段發(fā)揮作用。下面為你詳細(xì)介紹：
1.beforeCreate
- 觸發(fā)時機(jī)：在實例初始化之后，數(shù)據(jù)觀測和
event/watcher事件配置之前被調(diào)用。 - 作用：這個階段組件實例剛剛被創(chuàng)建，數(shù)據(jù)和方法都還沒初始化，一般用途較少。不過你可以在此處添加一些全局的初始化邏輯。
示例代碼：
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {
console.log('組件實例剛開始創(chuàng)建，數(shù)據(jù)和方法都未初始化');
}
};
</script>
2.beforeMount
- 觸發(fā)時機(jī)：在掛載開始之前被調(diào)用，此時模板編譯/掛載已經(jīng)完成，但還未將編譯好的DOM插入到頁面中。
- 作用：可以在這個階段對模板數(shù)據(jù)進(jìn)行最后的修改，不過由于DOM還未插入，所以不能進(jìn)行DOM操作。
示例代碼：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: '初始消息'
};
},
beforeMount() {
console.log('模板編譯完成，DOM 還未插入');
this.message = '修改后的消息';
}
};
</script>
3.beforeUpdate
- 觸發(fā)時機(jī)：在數(shù)據(jù)更新時，DOM 重新渲染和打補(bǔ)丁之前被調(diào)用。
- 作用：當(dāng)組件的數(shù)據(jù)發(fā)生變化，在DOM更新之前觸發(fā)該鉤子，你可以在這個階段獲取更新前的數(shù)據(jù)狀態(tài)，進(jìn)行一些數(shù)據(jù)處理操作。
示例代碼：
<template>
<div>
<button @click="changeMessage">修改消息</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '原始消息'
};
},
methods: {
changeMessage() {
this.message = '新消息';
}
},
beforeUpdate() {
console.log('數(shù)據(jù)已更新，DOM 即將更新');
}
};
</script>
4.updated
- 觸發(fā)時機(jī)：在數(shù)據(jù)更改導(dǎo)致的DOM更新完成之后被調(diào)用。
- 作用：當(dāng)數(shù)據(jù)更新且DOM重新渲染完成后觸發(fā)該鉤子，你可以在這個階段進(jìn)行一些依賴于更新后DOM的操作，比如獲取更新后的DOM元素尺寸。
示例代碼：
<template>
<div>
<button @click="changeMessage">修改消息</button>
<p ref="messageRef">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '原始消息'
};
},
methods: {
changeMessage() {
this.message = '新消息';
}
},
updated() {
console.log('DOM 已更新');
console.log('更新后的 DOM 元素內(nèi)容:', this.$refs.messageRef.textContent);
}
};
</script>
5.beforeDestroy（Vue 2）/beforeUnmount（Vue 3）
- 觸發(fā)時機(jī)：在實例銷毀（Vue 2）或卸載（Vue 3）之前被調(diào)用。此時實例仍然完全可用。
- 作用：可以在這個階段進(jìn)行一些清理工作，比如清除定時器、取消事件監(jiān)聽等，避免內(nèi)存泄漏。
示例代碼（Vue 3）：
<template>
<div></div>
</template>
<script setup>
import { onBeforeUnmount, onMounted } from 'vue';
let timer;
onMounted(() => {
timer = setInterval(() => {
console.log('定時器在運行');
}, 1000);
});
onBeforeUnmount(() => {
console.log('組件即將卸載，清除定時器');
clearInterval(timer);
});
</script>
6.destroyed（Vue 2）/unmounted（Vue 3）
- 觸發(fā)時機(jī)：在實例銷毀（Vue 2）或卸載（Vue 3）之后被調(diào)用。此時所有的事件監(jiān)聽器和子實例都已經(jīng)被銷毀。
- 作用：一般用于確認(rèn)組件已經(jīng)完全銷毀，進(jìn)行一些最終的清理操作。
示例代碼（Vue 3）：
<template>
<div></div>
</template>
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('組件已卸載');
});
</script>
這些生命周期鉤子函數(shù)能幫助你在組件的不同階段執(zhí)行特定的操作，從而更好地控制組件的行為和狀態(tài)。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
今天小編就為大家分享一篇在vue中解決提示警告 for循環(huán)報錯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實現(xiàn)電梯樣式錨點導(dǎo)航效果流程詳解
這篇文章主要介紹了Vue實現(xiàn)電梯樣式錨點導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點餐購物情景，文中通過示例代碼介紹的很詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
在前端開發(fā)中,當(dāng)用戶頻繁連續(xù)點擊按鈕,可能會導(dǎo)致頻繁的請求或者觸發(fā)過多的操作,本文主要介紹了vue3按鈕點擊頻率控制的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue中props報錯問題解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue 移動端記錄頁面瀏覽位置的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue組件化開發(fā)之通用型彈出框的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02