[30天 Vue学好学满 DAY28] keep-alive 状态保留

简介

vue原生元件，可达到cache目的。
使元件状态维持不变，不重走生命周期。

新增钩子
activated: 被keep-alive涵盖的原件重新渲染时触发。
deactivated: 被keep-alive涵盖的原件销毁时触发。
取代mounted

基础用法

<keep-alive>
  <myComponent  />
</keep-alive>

参数

include: 包含的元件。(字串、阵列、正则皆可匹配)

<keep-alive include="componentA,componentB">
  <component></component>
</keep-alive>

exclude: 排除的组件。(字串、阵列、正则皆可匹配)

<keep-alive exclude="componentC"> 
  <component />
</keep-alive>

max: 组件数最大值

<keep-alive max="3"> 
  <component />
</keep-alive>

exclude优先於include
状态保留元件超过上限，则删除第一个缓存元件

结合 vue router

前面有提到vue router，在实务上，有可以透过keep-alive将跳转前画面进行缓存。
所有匹配到的路由皆进行缓存

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

部分缓存解法:
方法1:透过上述include & exclude进行指定、排除

方法2:meta 属性
route.js

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 不需要保留 -> false
    }
  },
]

HTML: 透过v-if进行取值判断

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

透过keep-alive的确可以节省很多前端在处理cache上的工，但相对的也要对不同的路由以及元件进行整理，规划出真正需要进行缓存的元件，并针对不同业务逻辑、需求进行设计~

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98
https://juejin.cn/post/6844903918313406472

感谢各路大神