keep-alive学习与使用

定义：keep-alive是Vue的内置组件，用于包裹动态组件，缓存组件

理解：

实现动态组件交互，同时将加载出的组件进行缓存，当再次触发该组件时，不需要重复加载，防止dom重复渲染，减少加载等待的时间，减少性能的损耗。

应用场景：动态组件

使用步骤：

分情况

情况一：加载全部组件

1.在App.vue文件中直接写入一下代码

<keep-alive>
    <router-view />
<keep-alive />

2.编辑路由

正常编写即可

情况二：加载部分组件

1.明确需要加载的组件在哪个界面，那么keep-alive就需要在改页面写入

2.编写路由，需要加载的组件为父组件的子类，

3.若需要加载全部子组件，则不需要添加条件，若不加载所有子组件，则需要在路由中添加meta进行条件判断

4.父组件中根据条件进行判断使用$route.meta.keepAlive进行判断true或者false，true，该组件可以被加载，false，该组件不可以被加载

例子代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login.vue'
import ManageView from '@/views/ManageView.vue'
import Download from "@/views/personControll/DownLoad.vue";
// import EchartPictrue from '@/views/settingList/EchartPictrue'

Vue.use(VueRouter)

// 处理重复路由
const originpush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location){
  return originpush.call(this, location).catch(err => err)
}
 
const router = new VueRouter({
  routes:[
    {
        path: '/', //路径路由
        name: 'Login', //命名路由
        component : Login,

    },
    {
      path: '/manage', //路径路由
      name: 'manageView', //命名路由
      component: ManageView,
      children:[
        {
          path:'/',
          component: ()=> import('@/views/HomePage.vue'),
          meta:{
            keepAlive:true
          }
        },
        //echarts
        {
          path: '/picture', //路径路由
          component: ()=> import ('@/views/settingList/EchartPictrue.vue'),
          meta:{
            keepAlive:true
          }
        },
        {
          path: '/download', //路径路由
          name: 'Download', //命名路由
          component: Download,
          // component: ()=> import ('@/views/personControll/DownLoad.vue')
          meta:{
            keepAlive:true
          }
        },
        {
          path:'/listBook',
          component: ()=> import ('@/views/settingList/ListBook.vue'),
          meta:{
            keepAlive:true
          }
        }
      ]

    },

  ]
})
 
export default router

父组件

<keep-alive>
    <router-view v-if="$route.meta-keepAlive" />
<keep-alive />

keep-alive的属性

include：包含

exclude：不包含

例子

// 加载的界面name名为testName
<keep-alive include="testName">
    <router-view />
</keep-alive>

// 加载的界面name名不能为testName
<keep-alive exclude="testName">
    <router-view />
</keep-alive>


//当然keep-alive同时也可以进行动态缓存 :include   :exclude  
//注意：正则表达式需要进行动态缓存 :include

总结：控制加载组件主要有两种方法：方法1：使用meta进行控制，方法2：使用include，exclude来根据他们的name进行控制。