面试中常见的keep-alive问题

什么是keep-alive？

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

keep-alive的优点？

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

keep-alive有三属性

include - 字符串或正则表达，只有匹配的组件会被缓存
max-数字，最多可以缓存多少组件实例
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

<keep-alive include="home">
   <router-view />
</keep-alive>
//这串代码表示home组件会被缓存，而其他路由没配置就不会被缓存

我们可以用路由中的meta来控制

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

keep-alive的使用会触发两个生命周期函数?

这两个函数分别是
activated 在keep-alive组件激活之前也就是当显示组件时触发
deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发