一、keep-alive介绍
1. 什么是 keep-alive？
Vue.js 中 keep-alive 是一个内置组件，可以在需要缓存的组件上添加keep-alive 标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。
2. 如何使用 keep-alive?
在需要缓存的组件外部添加一个 keep-alive 标签，示例如下：
<template>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
这个例子中，我们将路由组件放到 keep-alive 标签内部，实现路由组件的缓存。
3. keep-alive 的作用
使用keep-alive可以有效地提高应用的性能。因为在组件被缓存的时候，即使组件被切换出去，它的状态依旧被保留。当再次切换到被缓存的组件时，不需要重新渲染和初始化组件，可以直接复用缓存的组件，从而加快页面的响应速度。
除此之外，还可以结合 activated 和deactivated生命周期钩子实现一些额外的功能。例如，在组件离开缓存页面时，使用 deactivated 钩子进行数据的清理和状态的重置。当组件再次出现在缓存页面时，使用 activated 钩子进行数据的恢复和状态的还原
4. keep-alive的include和exclude
-
include：用于指定哪些组件需要被缓存，可以是组件名称一类的标识符，也可以是使用正则表达式进行匹配。在
keep-alive中存在的缓存组件只有包含在include中才会被缓存，否则会被销毁。
-
exclude：用于指定哪些组件不需要被缓存，同样可以使用标识符或正则表达式进行匹配。在keep-alive中存在的缓存组件中，如果包含在
exclude中，则不会被缓存，而是每次都需要重新创建。
例如，我们可以在使用keep-alive组件时，使用include和exclude来控制缓存浏览的页面。例如，在下面的代码中，我们可以指定只有Home和About两个组件才会被缓存：
<keep-alive :include="['Home', 'About']">
<router-view></router-view>
</keep-alive>
而如果我们不想缓存某个组件，比如Login组件，我们可以使用exclude来指定这个组件：
<keep-alive :exclude="'Login'">
<router-view></router-view>
</keep-alive>
当然，也可以使用正则表达式来进行匹配，例如：
<keep-alive :include="/^Home/">
<router-view></router-view>
</keep-alive>
这段代码将会缓存以Home开头的所有组件。同时，我们也可以给include和exclude传递一个函数，该函数会在组件激活时被调用，根据返回值来确定组件是否被缓存。例如：
<keep-alive :include="component => component.name === 'Home'">
<router-view></router-view>
</keep-alive>
这个例子中，只有组件名称为Home的组件才会被缓存。
二、缓存之后第二次进入页面created和mounted不执行问题及解决
这两个钩子不执行是应为咱得路由用了keep-alive缓存了，想要让其执行你可以直接去掉缓存就行了
<keep-alive :exclude="'Login'">
<router-view></router-view>
</keep-alive>
就如上述代码，这样login页面中每次进入页面都会再次执行created和mounted
但是，有的场景是需要缓存，并且每次我们进入页面又得执行一些逻辑，这时用上述方式就不太符合需求，咱可以用activated钩子函数
直接将要处理的逻辑放在activated中就可以了，这样每次进入页面都会重新执行
用法和其他的生命周期钩子一样，直接加就行了。
activated() {
console.log('要处理的逻辑')
}
在上面已经介绍了keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。
-
activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
-
deactivated 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发
这两个有点类似页面的生命周期mounted和beforeDestroy钩子
created,mounted,activated,deactivated钩子函数的执行顺序如下：
- 初始进入和离开 created —> mounted —> activated --> deactivated
- 后续进入和离开 activated --> deactivated
