Vue2的Keep-Alive 有哪些生命周期鉤子函數(shù)
作者：前端老兵
當 MyComponent? 被隱藏時，它會被 <keep-alive>? 緩存起來，并且會調(diào)用 deactivated? 鉤子；當再次顯示時，會調(diào)用 activated 鉤子。
1. vue2的keep-alive 有哪些生命周期鉤子函數(shù)
在 Vue 2 中，<keep-alive> 組件為被包裹的組件引入了兩個額外的生命周期鉤子：activated 和 deactivated。
這兩個鉤子分別在組件被激活和停用時調(diào)用。
下面是這兩個鉤子的詳細信息以及如何使用它們：
1.1. activated 鉤子
當一個被 <keep-alive> 纏繞的組件被重新激活時（即從緩存中取出并重新添加到 DOM 中），activated 鉤子將會被調(diào)用。
這是執(zhí)行組件初始化工作或更新操作的好時機。
1.2. deactivated 鉤子
當一個被 <keep-alive> 纏繞的組件被停用時（即從 DOM 中移除但仍然被緩存），deactivated 鉤子將會被調(diào)用。
這通常用于釋放資源或取消事件監(jiān)聽器等操作。
1.3. 使用示例
下面是一個簡單的示例，展示了如何在一個組件中使用 activated 和 deactivated 鉤子：
// MyComponent.vue
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello from MyComponent!'
};
},
activated() {
console.log('MyComponent activated.');
// 當組件被激活時做一些事情，如重新獲取數(shù)據(jù)
},
deactivated() {
console.log('MyComponent deactivated.');
// 當組件被停用時做一些清理工作
},
methods: {
fetchData() {
// 假設這是一個獲取數(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>在這個例子中，當點擊按鈕時，v-if 將會使 MyComponent 在 DOM 中切換顯示和隱藏狀態(tài)。
當 MyComponent 被隱藏時，它會被 <keep-alive> 緩存起來，并且會調(diào)用 deactivated 鉤子；當再次顯示時，會調(diào)用 activated 鉤子。
通過這種方式，你可以有效地管理組件的生命周期，特別是在涉及到組件復用和性能優(yōu)化的情況下。
責任編輯：武曉燕
來源：
前端愛好者
