Vue.js 中 keep-alive 是一个内置组件，可以在需要缓存的组件上添加keep-alive 标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。

在需要缓存的组件外部添加一个 keep-alive 标签，示例如下：

这个例子中，我们将路由组件放到 keep-alive 标签内部，实现路由组件的缓存。

使用keep-alive可以有效地提高应用的性能。因为在组件被缓存的时候，即使组件被切换出去，它的状态依旧被保留。当再次切换到被缓存的组件时，不需要重新渲染和初始化组件，可以直接复用缓存的组件，从而加快页面的响应速度。

除此之外，还可以结合 activated 和deactivated生命周期钩子实现一些额外的功能。例如，在组件离开缓存页面时，使用 deactivated 钩子进行数据的清理和状态的重置。当组件再次出现在缓存页面时，使用 activated 钩子进行数据的恢复和状态的还原

例如，我们可以在使用keep-alive组件时，使用include和exclude来控制缓存浏览的页面。例如，在下面的代码中，我们可以指定只有Home和About两个组件才会被缓存：

而如果我们不想缓存某个组件，比如Login组件，我们可以使用exclude来指定这个组件：

当然，也可以使用正则表达式来进行匹配，例如：

这段代码将会缓存以Home开头的所有组件。同时，我们也可以给include和exclude传递一个函数，该函数会在组件激活时被调用，根据返回值来确定组件是否被缓存。例如：

这个例子中，只有组件名称为Home的组件才会被缓存。

这两个钩子不执行是应为咱得路由用了keep-alive缓存了，想要让其执行你可以直接去掉缓存就行了

就如上述代码，这样login页面中每次进入页面都会再次执行created和mounted

但是，有的场景是需要缓存，并且每次我们进入页面又得执行一些逻辑，这时用上述方式就不太符合需求，咱可以用activated钩子函数

直接将要处理的逻辑放在activated中就可以了，这样每次进入页面都会重新执行 用法和其他的生命周期钩子一样，直接加就行了。

在上面已经介绍了keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。

这两个有点类似页面的生命周期mounted和beforeDestroy钩子

created,mounted,activated,deactivated钩子函数的执行顺序如下：