Vue的keep-alive控件

keep-alive控件

keep-alive控件用于缓存组件，
vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
  keep-alive是用在一个直属子组件被开关的情形，同时只有一个子组件在渲染，若有v-for则不会工作
  注：keep-alive是一个抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中
  举个栗子：

// 页面文件
<keep-alive> 
    <router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

// 路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

keep-alive控件带的属性

include： 字符串或正则表达式，只有名称匹配的组件会被缓存
  exclude： 字符串或正则表达式，名称匹配的组件不会被缓存》
  max：  数字，最多可以缓存多少组件实例
  栗子：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<keep-alive :include="['a','b']">
  <component :is="view"></component>
</keep-alive>

生命周期问题

首页A页面
  B页面跳转A页面，A页面需要缓存
  C页面跳转A页面，A页面不需要缓存

// A路由：
{
  path:'/',
  name:'A',
  component:A,
  meta:{
    keepAlive:true
  }
}

export default{
  data(){
    return {};
  },
 methods:{},
 beforeRouteLeave(to,from,next){
   to.meta.keepAlive = true;    // B跳转到A时，让A缓存，即不刷新
   next()
 }
}

export default{
  data(){
    return {};
  },
 methods:{},
 beforeRouteLeave(to,from,next){
   to.meta.keepAlive = false;    // C跳转到A让A不缓存，即刷新
   next()
 }
}