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--------")
  }

标签：缓存,deactivated,activated,alive,用法,组件,home,keep
来源： https://blog.csdn.net/weixin_43848576/article/details/120527693