vue keep-alive实现动态缓存以及缓存销毁

littleGrow 发布于2019-08-26 10:10 / 2576人阅读

摘要：实现动态缓存以及缓存销毁需求来源及描述后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来是一个非常简单的后台管理系统布局，现在增加了菜单按钮点击左侧菜单栏时，右侧页面头部显示当前的页面标题，形成一个列表，点击可

vue keep-alive实现动态缓存以及缓存销毁 需求来源及描述

后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来是一个非常简单的后台管理系统布局，现在增加了tabs菜单按钮；
点击左侧菜单栏时，右侧页面头部header显示当前的页面标题，形成一个tabs列表，点击可切换页面内容和关闭tabs；
需求要求，点击左侧时，右侧显示页面内容，同时右侧header增加该页面的tabs，点击tabs可以切换页面，但页面内容不刷新，点击左侧菜单时，右侧内容刷新；

初步解决

第一想到的时利用vue的功能组件

</>复制代码

此时只能实现缓存，但是不能根据需求实现动态缓存

解决方案

利用include来判断需要缓存的路由组件，在根据点击状态更新include

</>复制代码

</>复制代码 
利用计算属性和vuex获取缓存列表

</>复制代码 
state: {
        keepAliveList:"",//保存缓存的列表
    },
    mutations: {
        setKeepAliveLists(state,arrListString){
            state.keepAliveList = arrListString;
        },
        
    }

</>复制代码 
computed:{
    keepAliveList(){
        // 获取缓存的路由列表
        return this.$store.state.keepAliveList;
    }
}

生成缓存列表，列表的值为各组件中name的值集合拼接的字符串

</>复制代码 
this.$store.commit("setKeepAliveLists",routerComponentNameList.join())

点击左侧菜单栏时，更新缓存列表

</>复制代码 
handleSelect(name) {
    if(this.routerNameMap.has(name)){//如果当前点击的路由已经在缓存列表中，则先清除缓存列表，再添加；
        this.resetKeepAive(name,this.keepAliveList);//删除缓存路由
        this.tabChangeRoute(name);//切换路由
    } else {
        this.routerNameMap.add(name)
        this.tabChangeRoute(name);
    }
},
// 更新要缓存的路由列表
resetKeepAive(name,cacheList) {
    const conf = this.keepAliveList;
    let arr = cacheList.split(",");
    if (name && typeof name === "string") {
        let i = arr.indexOf(name);
        if (i > -1) {
            arr.splice(i, 1);
            this.$store.commit("setKeepAliveLists",arr.join());
            this.$nextTick(() => {//添加缓存路由
                this.$store.commit("setKeepAliveLists",conf);
            })
        }
    }
}

点击右侧tabs关闭标签删除缓存

</>复制代码 
removeTab(name){
    // 点击tab上的关闭按钮，清除当前路由的缓存
    this.routerNameMap.delete(name);
    this.resetKeepAive(name,this.keepAliveList);//删除缓存路由
}

下面为主要代码，监听当前路由是否被移除缓存，如果移除缓存则需要销毁该组件，否则内容中的缓存组件会越来越来，影响使用性能；
创建一个mixin.js文件，然后引入到需要被动态缓存的路由组件中即可；

</>复制代码 
// 路由缓存管理
export default {
    computed: {
        keepAliveConf(){
            return this.$store.state.keepAliveList;
        }
    },
    watch:{
        keepAliveConf(e){
            // 监听缓存列表的变化，如果缓存列表中没有当前的路由或组件则在缓存中销毁该实例
            let name = this.$options.name;
            if(!e.split(",").includes(name)) {
                this.$destroy()
            }
        }
    },
}

GPU云服务器云服务器 cdn动态缓存 cdn 缓存动态 cdn缓存如何实现 js实现缓存数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105699.html

vue keep-alive组件的使用以及原理。

摘要：通过这两种方式分别检测是否匹配当前组件。修正取出中的不符合条件的，同时不是目前渲染的时，销毁对应的组件实例实例，并从中移除销毁对应的组件实例实例遍历中的所有项，如果不符合指定的规则的话，则会执行。则会调用组件实例的方法来将组件销毁。 keep-alive keep-alive是vue.js的内置组件，它能够把不活动的组件的实例保存在内存中，而不是直接的销毁，它是一个抽象组件，不会被渲染...

pingan8787 2019-08-26 13:38 评论0 收藏0
聊聊keep-alive组件的使用及其实现原理

摘要：为的组件将不会被缓存。通过这两种方式分别检测是否匹配当前组件。修正取出中的不符合条件的，同时不是目前渲染的时，销毁对应的组件实例实例，并从中移除销毁对应的组件实例实例遍历中的所有项，如果不符合指定的规则的话，则会执行。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：http...

frolc 2019-08-21 17:36 评论0 收藏0
Vue一个案例引发的动态组件与全局事件绑定总结

摘要：我们需要的最好效果肯定是当前的全局事件就在当前的组件下产生作用，当我们切换到其他组件时，事件自动删除，于是我可能想到的就是利用钩子函数去删除这个全局事件。最近在自学 Vue 也了解了一些基本用法，也记录了一些笔记有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，...

MycLambert 2019-08-23 13:03 评论0 收藏0
个人 vue 项目的优化总结

摘要：很多优化点都是根据实际情况入手，上面这几个，都是我在做项目时，感觉不合适而进行优化的，后面会持续补充下去主要说的是，我在项目中，自己遇到的一些小问题和解决方案图片 base64 问题 // 有一个 test 的组件 .icon { background: url(../assets/test.png); } // 然后有三个页面，引入了 test 组...

taoszu 2019-08-21 18:28 评论0 收藏0
Vue动态组件和异步组件

摘要：动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如页，那么给我们提供动态组件。实现动态组件的加载。的值可以是一个已经注册的组件的名字或者一个组件的选对象。动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如tab页，那么Vue给我们提供动态组件。基本使用 Parent.vue {{btn.name}} ...

nanchen2251 2019-08-23 14:57 评论0 收藏0