Shulou(Shulou.com)06/03 Report--

Editor to share with you an example analysis of keepAlive cache removal in vue. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

Keepalive is often used for caching in vue projects, which can be said to be very convenient to meet basic requirements. But when you encounter the same page, it is troublesome to cache or not to cache separately depending on the conditions.

First of all, list the pits:

1.

Many things on the Internet are in this way. With this method, things that have been cached cannot be deleted. In fact, this method completely divides the cached page and the non-cached page into two components for display, although in general, it looks like that. In fact, it is based on your conditions, showing different components at different times.

two。

Vm.$destroy ()

When I think of removing the existing cache, I guess most people's first reaction is to think about how to delete the cache, so I try to find a way to delete the cache. Then the destroy method of vue is called. When destroyed, you will be very happy to find that it has come true! The cache is deleted ~ so you think you've changed it, and you go on to develop something else. And then one day you find out, huh? Why is my page not cached? After some troubleshooting, it is found that pages that have called $destroy () will no longer be cached.

Finally, my solution:

Template

Vuex

KeepAlive: ['/ joinManage/register/add-step1','/ joinManage/register/add-step2','/ joinManage/register/add-step3','/ joinManage/config/add-step1','/ joinManage/config/add-step2','/ joinManage/config/add-step3','/ joinManage/config/add-step4','/ joinManage/config/add-step5',]

Use include+vuex to dynamically change the required cache pages. The name accepted by include is the component's name (here I find it troublesome to name it directly with path, but not with path)

In this way, when a page needs to be cached, we add its name to the keepalive array and delete the corresponding page without needing it. In this way, the cache deletion effect of keepAlive can be realized.

The above is all the contents of the article "example Analysis of keepAlive Cache cleanup in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.