携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

定义:

keep-alive是Vue的一个内置组件，如果它包裹动态组件时，就会缓存不活动的组件实例，而不是销毁它们。且它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中

功能:

keep-alive主要功能是能够缓存不活动的组件，在vue组件中，我们进行组件切换时，默认会将切换前的那个组件进行销毁操作，但是如果我们想要保留切换之前的组件的状态以提高交互体验，增进性能优化时可以通过keep-alive来实现

属性:

keep-alive主要有三种属性（prop），可以在标签上使用

include - 只有名称匹配的组件会被缓存，类型为字符串或正则表达式。
exclude - 任何名称匹配的组件都不会被缓存，类型为字符串或正则表达式。
max - 最多可以缓存的组件实例数量限制，类型为数字类型，当超过数量限制时，会从最早缓存的组件开始销毁。

<keep-alive :include="a" :exclude="b" :max="10"> 
    <component :list="list"></component> 
</keep-alive>

生命周期函数:

只有当组件被keep-alive包裹时，生命周期才有效，主要有activated和deactivated两个钩子函数

activated:在keep-alive组件被激活时调用，该钩子函数在服务器渲染期间不可被调用
deactivated:在keep-alive组件被停用时调用，该钩子函数在服务器渲染期间不可被调用

钩子函数执行顺序:

当使用keep-alive时，如果组件页面首次进入则钩子的触发顺序为 created -> mounted -> activated，组件切换时，触发 deactivated，再次切换进入时，只会触发activated

应用:

1.通过keep-alive标签，嵌套想要保留状态的组件

注意: keep-alive嵌套的组件都要有自己的名称（name属性），有name属性或者全局注册的都可以

keep-alive不能使用v-if,v-show等属性，所以如果想要多个组件动态切换时，可以在keep-alive内的组件增加v-if,v-show等

<keep-alive> 
    <component :list="list"></component> 
</keep-alive>

2.在路由meta标签中使用，将想要保留状态的组件keepAlive的属性设置为true

    path: '/index',
    name: 'index',
    component: () => import('@/views/index/index.vue'),
    meta: {
      title: '首页',
      keepAlive: true
    }
  }

3.在路由首位钩子函数中使用

beforeRouteLeave (to, from, next) {
    if (to.path === '/index') {
      to.meta.keepAlive = true
    } else {
      to.meta.keepAlive = false
    }
    next()
  },

浅谈vue keep-alive属性

定义:

功能:

属性:

生命周期函数:

应用: