When should keep-alive(component caching) be used?

For example, when jumping to the details page, the scrollbar of the list page needs to be kept at the same depth when returning, which can improve the user experience. In VUE, we can use the Keep-alive component to solve the need of “page caching”.

During component switching, the state is kept in memory to prevent repeated DOM rendering, reduce loading time and performance consumption, and improve user experience

Page caching

In a VUe-built single page application (SPA), the routing module generally uses vuE-Router. Vue-router does not save the state of the switched component; when it pushes or replaces, the old component is destroyed and the new component is created, going through the full life cycle.

The principle of

If the name of a VNode meets the caching criteria (include and exclude can be used) in render, the created function calls will store the VNode nodes that need caching in this.cache. The previously cached VNode instance is fetched from this.cache for rendering.

VNode: Virtual DOM, which is basically a JS object

Props

  • Include – a string or regular expression. Only components with matching names are cached.
  • Exclude – a string or regular expression. Any component with a matching name will not be cached.
  • Max – Numbers. Maximum number of component instances can be cached.

Life cycle function

1. Activated The hook function that is called when keep-alive is activated is not called during server-side rendering. 2. Deactivated The hook that is called when keep-alive is disabled is not called during server-side rendering A component created in keep-alive has two more life-cycle hooks: The value of activated and deactivated use keep-alive to retain data in the memory. If you want to obtain the latest data each time you enter the page, you need to obtain data in the Value of Activated phase, which performs the task of obtaining data in the original Created hook function. Note: These two life cycle functions will only be called if the component is wrapped in keep-alive. They will not be called if the component is used as a normal component. After version 2.1.0, exclude will exclude the component even if it is wrapped in keep-alive. These two hook functions will still not be called! In addition, this hook function is not called during server-side rendering. Copy the code

use

<template> <div id="app"> // 1. <keep-alive include='test'> <router-view/> </keep-alive> // 2. <keep-alive include='a,b'> <router-view/> </keep-alive> // 3. Use regular expressions, need to use v - bind < keep alive: - include = '/ a | b/' > < the router - view / > < / keep alive - > / / 5. <keep-alive :include='includedComponents'> <router-view/> </keep-alive> // 5. <keep-alive exclude='test'> <router-view/> </keep-alive> </div> </template> <script> export default  { name: 'App' } </script>Copy the code

An optimized way to write component caching

When defining routes, add additional routes [meta information], Const Goods => require(['@/components/home/ Goods '], const Goods => require(['@/components/home/ Goods '], resolve) const Ratings = resolve => require(['@/components/home/ratings'], resolve) { path:'/', component:() => import('.. /views/home/index.vue'), meta: {isKeepAlive: true}} {path: 'goods', name: 'goods', Component: goods, meta: {keepAlive: false / / no need to cache}}, {path: 'ratings' name:' ratings' component: ratings, meta: {keepAlive: True // Cache required}},Copy the code
<div> <keep-alive> <router-view V-if ="$route.meta. IsKeepAlive "/> </keep-alive> <router-view  v-if="! $route.meta.isKeepAlive" /> </div>Copy the code

Keep-alive life cycle

  • Created > Mounted > Activated 2. Deactivated is triggered after exit
  • 1. Only activated is triggered
  • Mount methods, etc., that are executed only once in Mounted. The methods that the component executes each time it goes in are stored in Actived