技术逻辑： 当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.01if(this.opacity <= 0) this.opacity = 1},16)},deactivated() {console.log('News组件失活了')clearInterval(this.timer)},}</script>
如果觉得《缓存路由关联的两个生命周期activated和deactivated》对你有帮助，请点赞、收藏，并留下你的观点哦！
