Vue2的Keep-Alive 有哪些生命周期鉤子函數(shù)
1. vue2的keep-alive 有哪些生命周期鉤子函數(shù)
在 Vue 2 中，<keep-alive> 組件為被包裹的組件引入了兩個(gè)額外的生命周期鉤子：activated 和 deactivated。
這兩個(gè)鉤子分別在組件被激活和停用時(shí)調(diào)用。
下面是這兩個(gè)鉤子的詳細(xì)信息以及如何使用它們：
1.1. activated 鉤子
當(dāng)一個(gè)被 <keep-alive> 纏繞的組件被重新激活時(shí)（即從緩存中取出并重新添加到 DOM 中），activated 鉤子將會(huì)被調(diào)用。
這是執(zhí)行組件初始化工作或更新操作的好時(shí)機(jī)。
1.2. deactivated 鉤子
當(dāng)一個(gè)被 <keep-alive> 纏繞的組件被停用時(shí)（即從 DOM 中移除但仍然被緩存），deactivated 鉤子將會(huì)被調(diào)用。
這通常用于釋放資源或取消事件監(jiān)聽器等操作。
1.3. 使用示例
下面是一個(gè)簡(jiǎn)單的示例，展示了如何在一個(gè)組件中使用 activated 和 deactivated 鉤子：
// MyComponent.vue
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello from MyComponent!'
};
},
activated() {
console.log('MyComponent activated.');
// 當(dāng)組件被激活時(shí)做一些事情，如重新獲取數(shù)據(jù)
},
deactivated() {
console.log('MyComponent deactivated.');
// 當(dāng)組件被停用時(shí)做一些清理工作
},
methods: {
fetchData() {
// 假設(shè)這是一個(gè)獲取數(shù)據(jù)的方法
console.log('Fetching data...');
}
}
};然后在父組件中使用 <keep-alive> 包裹 MyComponent：
<template>
<div>
<keep-alive>
<my-component v-if="showMyComponent" />
</keep-alive>
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
showMyComponent: true
};
},
methods: {
toggleComponent() {
this.showMyComponent = !this.showMyComponent;
}
}
};
</script>在這個(gè)例子中，當(dāng)點(diǎn)擊按鈕時(shí)，v-if 將會(huì)使 MyComponent 在 DOM 中切換顯示和隱藏狀態(tài)。
當(dāng) MyComponent 被隱藏時(shí)，它會(huì)被 <keep-alive> 緩存起來(lái)，并且會(huì)調(diào)用 deactivated 鉤子；當(dāng)再次顯示時(shí)，會(huì)調(diào)用 activated 鉤子。
通過這種方式，你可以有效地管理組件的生命周期，特別是在涉及到組件復(fù)用和性能優(yōu)化的情況下。
