The introduction

For those who have used vue.js to develop web pages, keep-alive is quite familiar, but for those who have just started, we will introduce it a little.

Keep-alive is mainly used to preserve component states or avoid re-rendering rather than destroying them. The main benefit of keep-Alive is that it can avoid performance problems caused by repeated rendering when switching between components, such as frequent tabs switching. Our keep-alive can be very useful if we want to keep what we did before we return.

For specific usage, refer to keep-alive on vue.js official website

Think about the

Speaking of which, I would like to ask you how to use Keep-Alive flexibly.

scenario

Here’s an example: Mobile terminal H5 project, order list page, paging, when we are sliding, will load the corresponding data, when we went to the order details page, and from the order details order list, then need to make our products front-end buddy do after return, need to keep the last load data and the position of the slide, “Keep-alive” means “keep-alive” or “Keep-alive” means “keep-alive” or “Keep-alive”.

The mounted life-cycle hook of a keep-alive component is not executed when other pages are cached. This is where most of our initialization is written. Ha ha, don’t panic, don’t panic, the way is people want to come out, this is not, the following to teach you three solutions

To solve

1. Use the Activated lifecycle hook (vUE)

The value of activated hooks are written in the Activated hook, so whenever you go to any page and then go back to the current page, the data will be updated, because components that were previously hidden are activated, but the state of the component is still the same as it was last time

2. Manually operate keep-alive

Those of you who have seen the vue source code will see that the keep-Alive implementation stores components in the Caches array, which is when we operate on the array. At this point, we can decide whether to cache or not to cache when going to other pages, so that we can achieve flexible use

Reference source code snippet

Here’s how to clear the cache manually

removeKeepAliveCacheForVueInstance(vueInstance) { let key = vueInstance.$vnode.key ?? vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : ""); let cache = vueInstance.$vnode.parent.componentInstance.cache; let keys = vueInstance.$vnode.parent.componentInstance.keys; if (cache[key]) { vueInstance.$destroy(); delete cache[key]; let index = keys.indexOf(key); if (index > -1) { keys.splice(index, 1); }}}Copy the code

Main core is obtained through vueInstance.$vnode.parent.com ponentInstance to keep alive – as an example, to clear the cache, destory the current instance

When switching between pages, move the page forward and add a push tag to params, and move back and add a POP tag to params.

In app. vue, listen for route changes to dynamically control include. If to.params.cachesType is push, caching is required, otherwise not.

$route(to) {$route(to) {if (to.params.cachestype == "push") {this.include.push(to.name); } else { this.include.pop(); } if (to.params.clearRoute) {this.include = ["Index"]; }}},Copy the code

conclusion

So, as we get to the end of the record, let’s talk a little bit about the differences between these three methods

Method one: vUE official provided, although easy to use, but his disadvantage is not flexible cache. Method 2: It’s straightforward to operate, but annoying to write. The advantage is that it’s flexible and works with the navigation guard beforeRouteLeave. If you need to clear the cache before heading to the page, The method is invoked removeKeepAliveCacheForVueInstance can, can deal with the problems existing in the browser refresh. Method 3: It is generally used for mobile terminal H5 to maintain the page stack by itself. However, if there is a refresh, the page stack will be abnormal, which will lead to problems in the contents of include.

Last but not least, don’t be too fond of Keep-Alive, because people are shy too!!

Under the guidance of the company boss, I have some feeling, so I write this article, hoping to help you interested students can pay attention to the boss

We make progress together and learn from each other!!