keep-alive总结

什么是keep-alive

提到keep-alive 大多数人都是又爱又恨啊
爱是他能够缓存页面、用起来很是方便，
恨是不能够区分处理遇到一些问题

基础概念

作用标签

keep-alive 可用于router-view标签上 或者 component 动态标签上

内置props

• include 字符串或者正则表达式，只有名称匹配的组件会被缓存
• exclude 字符串或正则表达式,任何名称匹配的组件都不会被缓存
• exclude 优先级大于 include
• max 数字，最多缓存的组件实例，数量超过了max，前面的组件实例会被移除

生命周期

activated

在keep-alive包裹的组件被激活时调用

deactivated

在keep-alive包裹的组件停用时调用

生命周期执行顺序

页面第一次进入 狗子的触发顺序 created -> mounted->activated
退出时触发 deactivated
返回进入页面时，只触发 activated

keep-alive使用时的一些问题

当嵌套路由时 keep-alive不生效

如果在vue项目中使用了嵌套路由，则需要在子路由的router-view标签上加 keep-alive 即可实现局部子路由的缓存

当页面返回时不调用接口，页面首次进入时调用接口的区分

解决方案是 使用beforeRouteEnter监听路由来自哪个页面，然后区分，再根据业务需求处理逻辑

    beforeRouterEnter(to,from,next){
        next(vm=>{
            if(from.name == "A"){
                // 调用接口，刷新页面
            }else{
                // 不调用接口，不刷新页面
            }
        })
    }

当不用keep-alive，想要缓存页面时还有哪种方法

再离开页面或者刷新页面，将data缓存到sessionStorage中，刷新完成，将数据堵读出来，赋值给data

    window.addEventListener("beforeunload",()=>{
        const pageData = {}//页面数据
        sessionStorage.setItem("sessionPage",pageData)
    })
    data(){
        const sessionPageData = sessionStorage.getItem("sessionPage")
        return Object.assign(
            {
            // 页面数据
            page:1
            },
            sessionPageData
        )
    }