Vue学习:两个新生命周期钩子（在缓存中仍然执行）--路由组件独有activated /deactivated

缓存的路由组件扩展：缓存多个 使用数组

<keep-alive include="['News','a']">
                <router-view></router-view>
 </keep-alive>

透明度发送变化（缓存不触发销毁流程，也就是说明不会触发destoryed钩子）

<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>

        name:'News',
        data() {
            return {
                opacity:1
            }
        },

使用定时器不会触发destoryed钩子

    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 取消激活的deactivated

(切进来就是activated 切出去deactivated ----->不会因为缓存而不执行)

        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)
        },

前面的$nextTick-->当你操作修改数据 VUE操作DOM 将真实DOM放入页面Vue帮你调用这个函数