Detailed graphic explanation of how to clear the keep-alive cache

Opening scene

My project has no separation between the front and back ends. The technology stack is layui+vue+jq. I introduced vue later. In order to better componentize, the page is componentized to reduce code duplication. Because jq pages need to frequently obtain dom elements, the pages are very redundant. jq pages are also not easy to componentize and extract and encapsulate the functions of the pages. Therefore, I introduced vue. Recently, I need to realize a requirement, which is multi-page caching. By clicking the menu bar on the left, the page is displayed on the right, but the clicked pages need to be cached, as shown below

This is a simple example I made

Direct rendering using v-for

At first, my idea was to design an array, push the clicked component to an array every time it is clicked, and then traverse it with a custom component through v-for;

It is found that all the content will be added when clicking. At this time, an index is needed to display the current highlight, and the requirement is to display only one page at a time. At this time, the index must be used to hide other pages.

There is a problem with v-for. When deleting, it will re-render because the array changes

Now you can see that this function has been implemented, but every click adds a lot of identical elements. At this time, we can do a deduplication operation.

The multi-page function is easily realized by deduplication

Because my function needs to implement multi-page caching, that is, to cache all these pages, so I used the keep-alive component, but when the array changes, the page will be re-rendered

When I operate page B, I close page A, that is, delete it, and then page B is re-rendered, which does not achieve the cache effect I want. Therefore, you cannot use v-for directly for rendering

Later, I thought of implementing a custom directive myself to determine whether to re-render, but the custom directive does not have this at all, so I can't get the instance or the vnode, and I can't implement caching myself.

Later, I wanted to write a component myself to use jsx syntax to render and decide whether to cache or recreate the instance, but I couldn't render it with the cache.
Then I thought of the keep-alive component, which directly renders the currently highlighted page without looping

Rendering directly with custom components

At this time, the cache function can be realized. It is still very troublesome to realize a keep-alive by yourself. The built-in keep-alive is still very useful and the cache is still very strong.

Problems with keep-alve powerful cache

Later I found a problem. When I operated on the page and closed it, when I reopened it, there was still data on the page. I can only say that the keep-alive cache is too powerful. Then I thought about how to clear the cache. The official website has two APIs, include and exclude. Include will cache the names of the components included, and exclude is just the opposite. Those included will not be cached. However, my page component was built before and is an anonymous component.

I tried adding the name but it didn't work. I looked up how to clear the cache on Baidu.

Reference article: https://www.jb51.net/article/219189.htm

I thought about whether I could clear its cache when I deleted it.

After searching for a long time, I finally found the cache

This is a simple example I wrote in $children[0].$options.parent.cache. In my real project, it is the first element in _vnode.chindren.componentInstance

The most important thing is this keep-alive. If you find this thing, you can find the cache. I have tried to write jsx before, but it seems that I can't find the cache thing. I guess there is no cache without keep-alive. It is still difficult to implement a keep-alive by yourself.

Find the cache and you can see that the key name in it is related to the name of our component. You can use indexOf to match and then delete the cache.

You can see that the function has been implemented, so multi-page caching can be achieved.

I have to say that Vue is still very powerful. Keep-alive is still very powerful.

Summarize

This is the end of this article about how to clear the keep-alive cache. For more information about clearing the keep-alive cache, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!