activated 和 deactivated 是 Vue.js 中的生命周期钩子函数,主要用于处理组件在 keep-alive 缓存中进入和离开时的行为。
这些钩子函数通常用于在组件进入缓存时执行特定的操作,以及在组件离开缓存时执行清理操作。
下面是关于这两个钩子函数的用例和示例:
activated 钩子函数:
.当组件从缓存中进入时,activated 钩子函数会被调用。
.可以在这个钩子函数中执行初始化操作,例如数据加载、订阅事件等
<template>
<div>
<p>Component Content</p>
</div>
</template>
<script>
export default {
activated() {
// 当组件从缓存中进入时执行的代码
console.log('Component activated');
// 可以在这里执行一些初始化操作
}
}
</script>
deactivated 钩子函数:
.当组件离开缓存时,deactivated 钩子函数会被调用。
.可以在这个钩子函数中执行清理操作,例如取消事件订阅、清除定时器等。
这些钩子函数通常与 元素一起使用,用于缓存组件,以便在组件离开和重新进入缓存时执行特定的操作。例如:
<template>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
在上面的示例中, 内部的组件将使用 activated 和 deactivated 钩子函数来处理缓存状态的进入和离开。