Vue中keep-alive缓存机制如何深入理解与应用？

本文共计1587个文字，预计阅读时间需要7分钟。

官方说明：keep-alive 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。与 transition 类似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件树的父级中。

官方解释：

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

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免重新渲染。

keep-alive 是 Vue 的内置组件，在组件切换过程中将状态保留在内存中，等再次访问的时候，还保持着离开之前的所有状态，而不是重新初始化。也就是所谓的组件缓存。

我们知道，使用路由vue-router切换组件的时候是不保存状态的，它进行router.push()或router.push()或router.replace()的时候，旧组件会被销毁，新组件会被新建，然后走一遍完整的生命周期。