Before reading this article, you will be familiar with both VUE and Keep-Alive, so we will not bother with the relevant materials and jump right into the main body.

If you have patience and are looking for a solution to a similar problem, you can go straight to the bottom of this article.

This is part 1 of series 1: Vue full site cache keep-alive: Dynamic cache removal

Series 2: Vue full site Cache 2: How to design full Site Cache

Vue – Router-THEN: Before and after Page Data Transfer

Series 4: Vue-router-then: Implementation Principles for Vue global Cache

preface

Take an accounting project as an example, common scenarios include home page, entry to account page, Select contract, new contract, Select customer, new customer pages.

In these pages, it is clear that the user’s browsing behavior should be progressive, which in layman’s terms means that the browsing page is progressing.

And there is interaction between these pages, two kinds of interaction:

  • 1. As users progress, they always enter a new page. (For example, after the contract list page has been loaded multiple times, if you go to one of the contract details and return, you should still be at the same place as the previous list page, instead of refreshing the list page again.)
  • When the user moves back, the user must be able to retain the data on the previous page and continue the operation. (For example, a new contract can be created when a contract is selected, a pile of data can be filled in when a new contract is created, and a customer can be created when a customer is selected. Then this pile of operations should be able to do:Continue to create new contracts after the creation of customers, and continue to record the contract to the account after the completion of the contract)

The figure above is the real effect in the demo project. In the current common VUE development scheme, vuex or localStorage are generally introduced to store and call the data in each page. In my opinion, this is very unscientific and not elegant.

What’s wrong with keep-alive

Vue supports the keep-alive component. If enabled, all data in the page will be retained. Therefore, there is no problem with the previous page data being retained when the previous page is backward.

The problem is that the interaction — the user always gets to a new page as they progress, whereas once you cache, you can’t always get to a new page, you always get to a cached page, and that’s a real headache.

The official include and exclude feature says that you can decide which pages to cache and which not to cache. link

However, the problem comes back to square one and does not address the need for us to use cached caches at our discretion.

So a lot of people think of a way to destroy the page when leaving the page is not ok, but it does not, there is a bug, component destroyed cache is still:

Therefore, some people hope that keep-alive can add the function of dynamically deleting cached components, “issue”

This is an old topic that hasn’t moved forward in the past, and the core reason is that Keep-Alive can’t properly handle destroyed components.

Try to solve the problem

If you can implement the dynamic use of caching, then all problems will be solved.

Initially, I looked into the keep-Alive code and found this:

So, I wondered if I could solve the problem by deciding not to use caching if the component has been destroyed, so I submitted a PR:

However, this PR was not passed, so I gave up.

Violence solves the problem

I continued to investigate alternatives, and when I printed the component variable, I found this familiar field:

This is the keep-Alive component. I quickly opened it and saw something more familiar:

Before destroying the component, look for the keep-alive component of the parent of the routing component, manipulate the cache list in it, and forcibly delete the cache in it. Then the problem is solved.

conclusion

Keep-alive does not support dynamic destruction of cached components by default, so the solution here is to forcibly remove the cache by manipulating the CAhCE list in the Keep-Alvie component directly:

Mixin intercepts the route away event using the vue. mixin method and destroys the page cache in this intercepting method.
Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {// If you return to the previous layer, you can change the judgment logic here according to your business and decide whether to destroy this layer cache or not.
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? ` : :The ${this.$vnode.componentOptions.tag}` : ' ')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > - 1) {
                                    keys.splice(index, 1); }}deletecache[key]; }}}}this.$destroy(); } next(); }});Copy the code

After the language

This article focuses on how to dynamically remove the keep-alive cache. For other issues such as how to set the page hierarchy and how to transfer data between the front and back pages, please look forward to “VUe-Router-THEN: Data Transfer between the front and back pages”.

Continue reading – Series 2: Vue Full Site Cache 2: How to Design a Full Site Cache

From the original star blog: wanyaxing.com/blog/201807…