写在前面

? ? ? ? 晚上好。今天讲vue中的组件缓存。

Vue该如何实现组件缓存

? ? ? ? 在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来，那么自然会存在组件之间切换的问题，vue中有个动态组件的概念，它能够帮助开发者更好的实现组件之间的切换，但是在面对需求频繁的变化，要切换组件时，动态组件在切换的过程中，组建的实例都是重新创建的，而我们需要保留组件的状态，为了解决这个问题，需要使用到vue中内置组件<keep-alive>。

? ? ? ? <keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

? ? ? ? 简单来说，比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个执行评率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

跟keep-alive有关的生命周期是哪些？

1.讲在前面

? ? ? ? 在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

2.生命周期函数

? ? ? ? 在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与deactivated。

? ? ? ? 2.1 activated钩子

? ? ? ? 在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

? ? ? ? 2.2 Activated钩子调用时机：

第一次进入缓存路由/组件，在mounted后面，beforeRouterEnter守卫传给next的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发。

? ? ? ? 2.3 deactivated钩子：

????????组件被停用（离开路由）时调用。

? ? ? ? 2.4 deactivated钩子调用时机：

????????使用keep-alive就不会调用beforeDestroy（组件销毁前钩子）和destoryed（组件销毁），因为组件没被销毁，被缓存起来了，这个钩子可以看做beforeDestroy的替代，如果你缓存了组件，要在组件销毁的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子 beforeRouteLeave =>路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated 离开缓存组件 => activated 进入缓存组件（如果你进入的也是缓存路由）。