Vue 路由 组件缓存（Day54）

缓存路由组件

1. 作用：让当前不进行展示的组件保持挂载，不在切换时被销毁

2. 设置：在需挂载的组件的父组件对其进行设置

   1. 需求：News 组件中新增输入功能，组件切换后输入内容不丢失

   2. 实现

      1. 在News 组件中新增输入框

         News组件

             <ul>
                 <li>news001 <input type="text"></li>
                 <li>news002 <input type="text"></li>
                 <li>news003 <input type="text"></li>
             </ul>
         

      2. 在其父组件中配置

         Message组件

                     <keep-alive include="News">
                         <router-view/>
                     </keep-alive>
         

注：

1. keep-alive 标签中不写include属性，其子组件均保持切换时保持挂载

2. include 属性中写的是组件名

3. 若只缓存多个组件中的某几个，则将include 中的值写为数组

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

两个新的生命周期钩子

1. 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态

2. 钩子

   1. activated（激活） :路由组件被激活时触发
   2. deactivated（失活） :路由组件失活时触发

为News组件新增渐变文字

1. 在组件中新增文字
2. 为文字设置透明度与定时器
3. 在组件激活时启动定时器，失活是清除定时器

<script>
import {defineComponent} from 'vue'
​
export default defineComponent({
    name: "News",
    data(){
        return {
            opacity:1
        }
    },
    activated() {
        this.timer= setInterval(()=>{
            this.opacity-=0.01
            if (this.opacity<=0) this.opacity=1
        },16)
    },
    deactivated() {
        clearInterval(this.timer)
    }
})
</script>
​
<template>
<div>
    <h3 :style="{opacity}">欢迎学习vue</h3>
    <ul>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</div>
</template>