一、简介
当页面被keep-alive缓存下来的时候，vue提供两个钩子函数
-
activated被 keep-alive 缓存的组件激活时调用。 -
deactivated被 keep-alive 缓存的组件失活时调用。
-
当keepalive页面缓存，有activated钩子和created钩子函数时
这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次文章来源：https://www.toymoban.com/news/detail-652654.html -
页面被缓存下来的时候，就不会触发destroyed生命钩子
取而代之触发的是deactivated钩子文章来源地址https://www.toymoban.com/news/detail-652654.html
二、使用
<template>
<ul>
<li :style="{opacity}">欢迎学习Vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News',
data() {
return {
opacity:1
}
},
/* beforeDestroy() {
console.log('News组件即将被销毁了')
clearInterval(this.timer)
}, */
/* mounted(){
this.timer = setInterval(() => {
console.log('@')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
}, */
activated() {
console.log('News组件被激活了')
this.timer = setInterval(() => {
console.log('@')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated() {
console.log('News组件失活了')
clearInterval(this.timer)
},
}
</script>
到了这里，关于vue中的activated和deactivated的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
