第三十八节:Vue路由:keep-alive缓存路由组件

1. 为什么需要缓存组件:

理解:

1. 默认情况下,在切换路由时,路由对应的组件会被重新创建或销毁,每次切换的路由都是新创
2. 如果可以缓存路由组件,将可以提高用户体
   • 例如用户在登录时,输入用户名,切换到了其他路由,回来时,原来输入内容还在,会怎样

2. keep-alive缓存组件

keep-alive 是Vue内置的组件,可以是被包含的组件被缓存,保留组件的状态,避免重新渲染

router-view 组件,如果被包裹在keep-alive里面,所以路径匹配的组件都会被缓存

编程方式:

<keep-alive>
    <router-view></router-view>
</keep-alive>

这样在每次切换组件时,组件不会被销毁, 组件中的状态得以报错

3. 钩子函数

说明

1. 在最初学习组件的生命周期时,学习过8个钩子函数
2. 如果使用keep-alive组件将会多出两个钩子函数分别为activated和deactivated
3. activated 被激活, 表示被缓存的组件激活使用, 当前处于活跃状态
4. deactivated 被活化,表示当前组件虽然被缓存,但是不是处于活跃状态

示例:

<script>
    export default {
        name:"Home",
        activated(){
            console.log("actived");

        },
        deactivated(){
            console.log("desactived");

        }
    }
</script>

4. keep-alive重要的两个属性

4.1 组件缓存的问题

讲这两个重要属性前,先理解下面几个问题

1. 缓存组件可以提升用户体验,
   • 比如: 登录输入的内容,当切换其他路由再回来是,还保留之前输的
2. 但是有必要所有的组件都需要缓存吗?
   • 是想一下,如果一个组件的数据需要实时跟后台数据同步,如果被缓存可能就不会发送ajax
   • 也就不会实时获取最新的数据
3. 可以我们也知道,keep-alive包裹的router-view组件位置的所有组件都会被缓存
4. 如果喜欢某些组件不需要被缓存应该如何处理

4.2 keep-alive两个非常重要的属性:

1. include 字符串或正则表达式, 只有匹配的组件会被缓存
2. exclude 字符串或正则表达式,任何匹配成功个组件都不会被缓存,用的比较多

示例:

通过组件名来排除一些不需要缓存的组件

<keep-alive exclude="About">
    <router-view></router-view>
</keep-alive>

此时通过exclude属性将About组件排除在缓存之外.