技术逻辑:
当keep-alive中的组件被点击时,activated生命周期函数被激活执行一次,切换到其它组件时,deactivated被激活。
如果没有keep-alive包裹,没有办法触发activated生命周期函数。
业务逻辑:
下面代码业务逻辑是,点击News触发activated生命周期函数,执行定时器改变“欢迎学习Vue”的透明度。
Home.vue组件
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
//绑定样式
news.vue组件
<template>
<ul>
<li :style="{opacity}">欢迎学习Vue</li>
<li>news001 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News',
data() {
return {
opacity:1
}
},
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>