CN113900628B - 一种基于vue的多页签实例缓存方法 - Google Patents

Abstract

本发明涉及一种基于vue的多页签实例缓存的方法，S1、利用抽象组件包裹路由组件，利用用所述key值来标志每一个页签组件实例；S2、抽象组件包括cache集合、不缓存页签队列、缓存页签队列；S3、初始化一个全局不缓存页签队列以及全局缓存页签队列；S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭；从而实现页签组件实例粒度上的多页签缓存方案。

Description

一种基于vue的多页签实例缓存方法

技术领域

本发明涉及多页签网页开发的技术领域，特别涉及一种基于vue的多页签实例缓存方法。

背景技术

目前，在WEB应用领域，越来越多的网站采用单页面应用这种方式。在这种方式下，用户在访问应用页面是不会频繁的去切换浏览页面，它通过多页签的方式来模拟传统多页面的操作模式，动态重写当前的页面来与用户交互，不需要重新加载整个页面，从而避免了传统多页面的重新加载所造成的性能浪费。目前流行的SPA三大框架包括React、Vue、Angular，Vue因学习成本低，易上手，生态体系完善等优点，获得了很多前端开发人员的青睐。再结合一些基于Vue的流行UI框架，即可快速的实现一个Vue的SPA多页签WEB应用。用户经常在多个页签间来回切换及操作，页面需要在被切换的时候保留用户的操作痕迹，在被切换回来的时候展示原有用户的操作；在关闭页签重新打开页面的情况下，需要重新渲染该页面，不保留用户的操作痕迹而被重新渲染。

传统上基于Vue-Router及Vuex实现的多页签缓存方案中，每一个页签对应一个路由。每次切换路由的时候，通过vue提供的keep-alive组件，根据当前的路由去匹配页签的name，从而获取相应的页面缓存或者加载新页面并放入缓存中。而关闭页签的时候，根据路由对应该的页面name去除相应页面缓存。

但是，在实际业务场景中，存在多页签，他们的路由不同但对应的组件却是一样的。例如内容编辑页面/content/1,content/2，keep-alive将不在适用，这个时候关闭/content/1页签，/content/2的页签也会失去缓存，导致该页面在再次激活的时候重新渲染。因此一般后管页面只支持打开一个类型的内容编辑页面。这种Vue原有的插件只能实现页签组件级别上的缓存，并不能够很好的满足我们在页签组件实例粒度上缓存的动态更新。

发明内容

基于此，有必要提供一种基于vue的多页签实例缓存的方法。

本发明实施例提供一种基于vue的多页签实例缓存的方法，包括如下步骤：

S1、在keep-alive的机制上，利用抽象组件包裹路由组件，根据当前路由配置生成一个唯一的key值，用所述key值来标志每一个页签组件实例，使得所述抽象组件根据唯一的key值识别相应的页签组件实例；

S2、所述抽象组件包括用于缓存页签组件实例的cache集合、用于存储不需要缓存的页签组件实例的key值的不缓存页签队列、以及用于存储需要缓存的当前页签的key值的缓存页签队列；

S3、初始化一个全局不缓存页签队列，用于存储不需要缓存的页签组件实例的key值，并将所述全局不缓存页签队列与所述抽象组件内的所述不缓存页签队列进行双向绑定；

初始化一个全局缓存页签队列，用于存储需要缓存的当前页签的key值，并将所述全局缓存页签队列与所述抽象组件内的所述缓存页签队列进行双向绑定；

S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；

S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭。

优选地，缓存具体包括：

根据当前路由配置生成一个唯一的key值，将所述key值作为页签的标识，生成的key值做为router-view的key属性，用于标志每一个页签组件实例，从而使得抽象组件能够识别key值标志的页签组件实例；

初始化一个全局不缓存页签队列，存储不需要缓存的页签的key值，并与抽象组件中的不缓存页签队列双向绑定；通过修改vue-router的初始化和addRoute方法，能够自动从路由配置中筛选出不需要缓存的路由，维护到全局的不缓存页签队列，从而动态的更新所有不需要缓存的页签组件实例；

初始化一个全局缓存页签队列，存储当前需要缓存的页签的key值，并与抽象组件中的缓存页签队列双向绑定；当更改全局缓存页签队列，就会触发所述抽象组件的缓存***，使得cache集合做出相应的修改。

优选地，抽象组件的渲染具体包括：

首先，抽象组件通过$slots.default获取当前被激活的页面组件实例；

然后，利用router-view的key属性，从而获取该页面组件实例的key值，根据这个页签组件实例标志的唯一key值，从而判断当前激活的页签组件实例的key值是否在不缓存页签队列中，若在所述不缓存页签队列中，则不需要缓存，直接返回当前组件并渲染；

若key值不在所述不缓存页签队列中，则需要缓存，继续判断所述key值是否在cache集合中，若在cache集合中，则返回cache集合中保存的页签组件，从而完成渲染；

若不在cache集合中，则将key和组件实例存入cache集合，并更新缓存页标签队列，然后，返回当前组件，设置keepalive标志并渲染。

优选地，自定义缓存包括：

根据不同的业务需求，对应设置相应的key值生成方式，通过对全局缓存页签队列的修改，从而动态的管理页签组件实例维度上的缓存的新增，修改和删除。

优选地，打开页签包括：

用户操作打开页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的打开。

优选地，切换页签包括：

用户操作切换页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的切换。

优选地，关闭页签包括：

路由发生更新，获取key值，判断key值是否在全局不缓存队列中；

若key值在所述全局不缓存页签队列中，则直接关闭当前页签，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作；

若key值不在所述全局不缓存页签队列中，则更新所述全局缓存页签队列，全局缓存页签队列变化从而触发所述抽象组件的缓存***，缓存***获取cache集合的所有对象，进而判断cache集合中的对象的key值是否在全局缓存页签队列中，若cache集合中对象的key值不在全局缓存页签队列中，则调用缓存组件的$destroy()方法，并去除cache集合中该组件，同时，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作。

本发明提供了一种基于Vue框架下，本方案首先提供了一个能够动态更新页面实例缓存的组件，并在此基础上形成一种Vue框架下动态更新缓存的方案，能够实现基于页签组件实例粒度上的自定义缓存动态更新，最大化的满足用户的个性化体验，赋予产品更多的可能性。

附图说明

通过附图中所示的本发明优选实施例更具体说明，本发明上述及其它目的、特征和优势将变得更加清晰。在全部附图中相同的附图标记指示相同的部分，且并未刻意按实际尺寸等比例缩放绘制附图，重点在于示出本的主旨。

图1为本发明优选实施例的抽象组件的渲染的流程图；

图2为本发明优选实施例的关闭页签的流程图；

图3为本发明实施例的流程图。

具体实施方式

下面结合附图和具体实施例对本发明技术方案作进一步的详细描述，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

如图1-3所示，本发明实施例提供一种基于vue的多页签实例缓存的方法，包括如下步骤：

S1、在keep-alive的机制上，利用抽象组件包裹路由组件，根据当前路由配置生成一个唯一的key值，用所述key值来标志每一个页签组件实例，使得所述抽象组件根据唯一的key值识别相应的页签组件实例；

S2、所述抽象组件包括用于缓存页签组件实例的cache集合、用于存储不需要缓存的页签组件实例的key值的不缓存页签队列以及用于存储需要缓存的当前页签的key值的缓存页签队列；

S3、初始化一个全局不缓存页签队列，用于存储不需要缓存的页签组件实例的key值，并将所述全局不缓存页签队列与所述抽象组件内的所述不缓存页签队列进行双向绑定；

初始化一个全局缓存页签队列，用于存储需要缓存的当前页签的key值，并将所述全局缓存页签队列与所述抽象组件内的所述缓存页签队列进行双向绑定；

S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；

S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭。

抽象组件用于控制页签的渲染与缓存，抽象组件是页签的父组件，当一个路由被激活，会先触发抽象组件的渲染，在抽象组件的选中过程中，我们就可以获得当前被渲染的页签对象，根据这个页签对象实例的唯一key值，可以控制其是重新渲染还是读取缓存中的页签对象，也可以将当前被渲染的页签对象加入到缓存中，也可以通过相应的方法删除页签的缓存。通过这个抽象组件，我们就能够实现动态的控制页签实例的缓存。

在优选实施例中，缓存具体包括：

根据当前路由配置生成一个唯一的key值，将所述key值作为页签的标识，生成的key值做为router-view的key属性，用于标志每一个页签组件实例，从而使得抽象组件能够识别key值标志的页签组件实例；

初始化一个全局不缓存页签队列，存储不需要缓存的页签的key值，并与抽象组件中的不缓存页签队列双向绑定；通过修改vue-router的初始化和addRoute方法，能够自动从路由配置中筛选出不需要缓存的路由，维护到全局的不缓存页签队列，从而动态的更新所有不需要缓存的页签组件实例；

初始化一个全局缓存页签队列，存储当前需要缓存的页签的key值，并与抽象组件中的缓存页签队列双向绑定；当更改全局缓存页签队列，就会触发所述抽象组件的缓存***，使得cache集合做出相应的修改。

在这个抽象组件的基础上，通过全局不维护缓存和缓存的页签key值队列，形成一套动态更新页签的缓存方案：实时统计类等不要缓存的页面，通过重写相关路由方法自动维护；其他需要缓存的页面，通过路由key值对全局缓存队列进行更新，从而实现页签组件实例粒度上的动态更新；通过抽象组件的嵌套，可以设置不同的key值，从而实现多级路由上页面组件实例粒度的缓存更新。

参考图1，在优选实施例中，抽象组件的渲染具体包括：

首先，抽象组件通过$slots.default获取当前被激活的页面组件实例；

然后，利用router-view的key属性，从而获取该页面组件实例的key值，根据这个页签组件实例标志的唯一key值，从而判断当前激活的页签组件实例的key值是否在不缓存页签队列中，若在所述不缓存页签队列中，则不需要缓存，直接返回当前组件并渲染；

若key值不在所述不缓存页签队列中，则需要缓存，继续判断所述key值是否在cache集合中，若在cache集合中，则返回cache集合中保存的页签组件，从而完成渲染；

若不在cache集合中，则将key和组件实例存入cache集合，并更新缓存页标签队列，然后，返回当前组件，设置keepalive标志并渲染。

页签组件是一个对象，cache集合实际存储的是该对象的内存地址，所以只要在初始化的时候缓存一次，此后每次读取的缓存都是存有最新数据及状态的页签组件。

在优选实施例中，自定义缓存包括：

根据不同的业务需求，对应设置相应的key值生成方式，通过对全局缓存页签队列的修改，从而动态的管理页签组件实例维度上的缓存的新增，修改和删除。

在优选实施例中，打开页签包括：

用户操作打开页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的打开。

在优选实施例中，切换页签包括：

用户操作切换页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的切换。

参考图2，在优选实施例中，关闭页签包括：

路由发生更新，获取key值，判断key值是否在全局不缓存队列中；

若key值在所述全局不缓存页签队列中，则直接关闭当前页签，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作；

若key值不在所述全局不缓存页签队列中，则更新所述全局缓存页签队列，全局缓存页签队列变化从而触发所述抽象组件的缓存***，缓存***获取cache集合的所有对象，进而判断cache集合中的对象的key值是否在全局缓存页签队列中，若cache集合中对象的key值不在全局缓存页签队列中，则调用缓存组件的$destroy()方法，并去除cache集合中该组件，同时，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (7)

1.一种基于vue的多页签实例缓存方法，其特征在于，包括如下步骤：

S1、在keep-alive的机制上，利用抽象组件包裹路由组件，根据当前路由配置生成一个唯一的key值，用所述key值来标志每一个页签组件实例，使得所述抽象组件根据唯一的key值识别相应的页签组件实例；

S2、所述抽象组件包括用于缓存页签组件实例的cache集合、用于存储不需要缓存的页签组件实例的key值的不缓存页签队列以及用于存储需要缓存的当前页签的key值的缓存页签队列；

S3、初始化一个全局不缓存页签队列，用于存储不需要缓存的页签组件实例的key值，并将所述全局不缓存页签队列与所述抽象组件内的所述不缓存页签队列进行双向绑定；

初始化一个全局缓存页签队列，用于存储需要缓存的当前页签的key值，并将所述全局缓存页签队列与所述抽象组件内的所述缓存页签队列进行双向绑定；

S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；

S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭。

2.如权利要求1所述的方法，其特征在于，缓存具体包括：

根据当前路由配置生成一个唯一的key值，将所述key值作为页签的标识，生成的key值做为router-view的key属性，用于标志每一个页签组件实例，从而使得抽象组件能够识别key值标志的页签组件实例；

初始化一个全局不缓存页签队列，存储不需要缓存的页签的key值，并与抽象组件中的不缓存页签队列双向绑定；通过修改vue-router的初始化和addRoute方法，能够自动从路由配置中筛选出不需要缓存的路由，维护到全局的不缓存页签队列，从而动态的更新所有不需要缓存的页签组件实例；

初始化一个全局缓存页签队列，存储当前需要缓存的页签的key值，并与抽象组件中的缓存页签队列双向绑定；当更改全局缓存页签队列，就会触发所述抽象组件的缓存***，使得cache集合做出相应的修改。

3.如权利要求1所述的方法，其特征在于，抽象组件的渲染具体包括：

首先，抽象组件通过$slots.default获取当前被激活的页面组件实例；

然后，利用router-view的key属性，从而获取该页面组件实例的key值，根据这个页签组件实例标志的唯一key值，从而判断当前激活的页签组件实例的key值是否在不缓存页签队列中，若在所述不缓存页签队列中，则不需要缓存，直接返回当前组件并渲染；

若key值不在所述不缓存页签队列中，则需要缓存，继续判断所述key值是否在cache集合中，若在cache集合中，则返回cache集合中保存的页签组件，从而完成渲染；

若不在cache集合中，则将key和组件实例存入cache集合，并更新缓存页标签队列，然后，返回当前组件，设置keepalive标志并渲染。

4.如权利要求2所述的方法，其特征在于，自定义缓存包括：

根据不同的业务需求，对应设置相应的key值生成方式，通过对全局缓存页签队列的修改，从而动态的管理页签组件实例维度上的缓存的新增，修改和删除。

5.如权利要求3所述的方法，其特征在于，打开页签包括：

用户操作打开页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的打开。

6.如权利要求3所述的方法，其特征在于，切换页签包括：

用户操作切换页签时，路由发生更新，从而触发抽象组件的渲染，抽象组件根据key值和全局不缓存页签队列，自动更新相应的cache集合中的对象和缓存页签队列，从而完成页签的切换。

7.如权利要求5或6所述的方法，其特征在于，关闭页签包括：

路由发生更新，获取key值，判断key值是否在全局不缓存队列中；

若key值在所述全局不缓存页签队列中，则直接关闭当前页签，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作；

若key值不在所述全局不缓存页签队列中，则更新所述全局缓存页签队列，全局缓存页签队列变化从而触发所述抽象组件的缓存***，缓存***获取cache集合的所有对象，进而判断cache集合中的对象的key值是否在全局缓存页签队列中，若cache集合中对象的key值不在全局缓存页签队列中，则调用缓存组件的$destroy()方法，并去除cache集合中该组件，同时，关闭当前页签后去往上一个页签，若上一个页签不存在，则去往首页，从而触发打开页签或者切换页签的操作。

Images