微网站 文章做论坛app网站
目录
- 一、简介
- 二、使用
一、简介
当页面被keep-alive缓存下来的时候，vue提供两个钩子函数
activated被 keep-alive 缓存的组件激活时调用。deactivated被 keep-alive 缓存的组件失活时调用。
-
当keepalive页面缓存，有activated钩子和created钩子函数时
这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次 -
页面被缓存下来的时候，就不会触发destroyed生命钩子
取而代之触发的是deactivated钩子
二、使用
<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.01if(this.opacity <= 0) this.opacity = 1},16)}, */activated() {console.log('News组件被激活了')this.timer = setInterval(() => {console.log('@')this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},deactivated() {console.log('News组件失活了')clearInterval(this.timer)},}
</script>