vue中的activated和deactivated

一、简介

当页面被keep-alive缓存下来的时候，vue提供两个钩子函数

• activated被 keep-alive 缓存的组件激活时调用。
• deactivated被 keep-alive 缓存的组件失活时调用。

1. 当keepalive页面缓存，有activated钩子和created钩子函数时
   这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次

2. 页面被缓存下来的时候，就不会触发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.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>