Summary of the role and use of vue keep-alive

1. What is keep-alive?

keep-aliveIt is a built-in component of Vue. When wrapping a dynamic component, an inactive component instance will be cached, and the component will not be destroyed.

2. Function

Used to cache components, avoid loading the same components multiple times, reduce performance consumption, and improve user experience.

3. Properties

• include: String or regular expression. Matching corresponding components 缓存.
• exclude: String or regular expression. Matching corresponding components 不缓存.

4. Scene

Cache components that are frequently used by users to reduce DOM rendering overhead.

5. How to use

5-1. Use keep-alive components in App.vue to cache all dynamic components

  <div id="app">
  	<keep-alive>
	    动态组件……
    </keep-alive>
  </div>

5-2. Cache according to the condition, include, excludeto judge whether to cache.

5-2-1.include will cache components whose name is model, separated by commas

<keep-alive include='model1,model2……'>
  <router-view/>
</keep-alive>

5-2-2.exclude will not cache components whose name is model

<keep-alive exclude='model1,model2……'>
  <router-view/>
</keep-alive>

5-2-3. Dynamic Binding

<keep-alive :include='ismodel'>
  <router-view/>
</keep-alive>

5-3. keepAlive: trueSetting cache

 const routes = [
  {
    
    
    path: '/',
    component: Home
  },
  {
    
    
    path:'/ login',
    component: Login
  },
   {
    
    
      path: '/list',
      component: List,
      meta: {
    
    
          isKeepAlive: true
      }
   }
]