kepp-alive的作用?keep-alive的属性?路由元信息？白名单黑名单?keep-alive的钩子函数

keep-alive它自身不会渲染一个dom元素，也不会出现在父组件中，作为标签使用包裹在需要缓存的组件外

路由元信息

如果要缓存部分页面可以使用路由元信息

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

在路由中与path，name同级定义meta

{
    path: '/live2',
    name: 'live2',
    component: () => import('../views/live2.vue'),
    meta:{
      noneedCache:true
    }
  },

这样就可以实现部分页面缓存也可以使用白名单黑名单

白名单黑名单

exclude黑名单 是不需要缓存的组件

<keep-alive exclude="不需要缓存的路由名称">
      <router-view></router-view>
  </keep-alive> 

如果有多个路由不需要缓存需要用数组 新建一个js文件引入

新建js文件

export default ['live1','live2']

引入js文件 在data中定义空数组进行赋值

import exclude from "@/assets/excludes"
export default {
  data() {
    return {
      exdata:[]
    }
  },
  mounted() {
    this.exdata=exclude
  },
}

 定义黑名单

 <keep-alive :exclude="exdata">
      <router-view></router-view>
  </keep-alive> 

 

include白名单 需要缓存的组件

<keep-alive include="需要缓存的路由">
      <router-view></router-view>
  </keep-alive> 

keep-alive的属性

exclude黑名单，include白名单，max最大数

keep-alive的两个钩子函数

 activated（组件激活时使用） 与 deactivated（组件离开时调用）

与created和mounted 的区别是

created和mounted：激活只调用一次

activated：每次激活时都会调用