谈谈keep-alive的理解

1、概念

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。

2、功能

keep-alive是系统自带的一个组件，用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

3、使用场景

列表页进入详情页，如果在列表页点击的都是相同的 ，详情页就不用请求多次了，直接缓存起来就行了，如果点击的不同，则需要重新请求数据。

4、使用方式

方式一：在App.vue中使用keep-alive标签，表示缓存所有页面

  <div id="app">
  	<keep-alive>
	    <tar-bar></tar-bar>
	    <div class="container">
	      <left-menu></left-menu>
	      <Main />
	    </div>
    </keep-alive>
  </div>

方式二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分
  	<keep-alive include='cc'>
      <router-view/>
    </keep-alive>
// 2. 将不缓存 name 为 cc 的组件
	<keep-alive exclude='cc'>
  	  <router-view/>
	</keep-alive>
// 3. 还可使用属性绑定动态判断
	<keep-alive :include='includedComs'>
  	  <router-view/>
	</keep-alive>

方式三：在router目录下的index.js中，

第一步 使用meta:{keepAlive = true },表示需要缓存

•  const routes = [
    {
      path:'/',
      component:Home,
      meta:{
          keepalive:true
      }
    },
    {
      path:'/login',
      component:Login
    },
     {
        path:'/edit',
        component:Edit,
        meta:{
            istoken: true
        }
     },
    {
        path:'/home',
        component:Home,
        meta:{
            keepalive:true
        }
    }
  ]
  

  第二步 在App.vue中进行判断

• <div id="app">
      <!--keep-alive 表示页面不会被销毁，即保持页面状态-->
      <keep-alive>
        <router-view v-if="$route.meta.keepalive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepalive"></router-view>
    </div>
  

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。