keep-alive用法

方法一 keep-alive 结合include属性缓存组件

使用情况:例如一个搜索框,输入文字后,切换到另一个组件,再返回的时候input框的文字会消失,所以要使文本框组件缓存

其实在keep-alive上有两个属性
include 值为字符串或者正则表达式,匹配的组件会被缓存。
exclude 值为字符串或正则表达式,匹配的组件不会被缓存。

// include 只缓存组件名字为home的组件,其他组件不会缓存,而exclude恰好相反
<keep-alive include="home">
   <router-view />
</keep-alive>

方法二 keep-alive结合路由中的meta属性来控制组件缓存

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

将home的路由规则中的meta添加keepAlive属性为true,则当前路由组件要进行缓存
keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存

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

产生问题
组件被缓存,并没有被销毁,所以组件在切换的时候也就不会被重新创建,也就不会调用created等生命周期函数
解决方法
使用activated与deactivated来获取当前组件是否处于活动状态
我在home组件里面写入了activated与deactivated生命周期函数
activated:组件激活时调用
deactivated:组件停用时调用

  activated(){
   //  进入home组件的那一刻就会打印
    console.log("哎呀看见我了")
    console.log("----------activated--------")
  },
  deactivated(){
  //  离开home组件的那一刻就会打印
    console.log("讨厌!!你又走了")
    console.log("----------deactivated--------")
  }
上一篇:maptalks 开发GIS地图(36)maptalks.three.29- custom-image-plane


下一篇:【DB笔试面试113】在Oracle中,DATA BLOCK,EXTENT和SEGMENT的区别是什么?