面试题：Vue中Keep - Alive的工作原理是什么

Question

请详细阐述Vue的Keep - Alive组件的工作原理，包括它是如何缓存组件实例，以及在缓存和激活组件时的生命周期钩子变化情况。

Answer 1

Keep - Alive组件工作原理

1. 缓存组件实例：
   • Keep - Alive是Vue内置的一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。
   • 当它包裹的组件被切换时，不是销毁组件实例，而是将组件实例缓存起来。它内部维护了一个缓存对象cache，以组件的key作为键（如果没有设置key，则会根据组件的name选项或者组件自身的id来生成key），缓存的组件VNode作为值。
   • 例如，当有两个组件A和B，通过keep - alive包裹并切换显示时，A组件首次渲染后，其VNode会被缓存到cache中，当从B组件切回A组件时，直接从cache中取出A组件的VNode进行渲染，而不是重新创建A组件实例。
2. 缓存和激活组件时的生命周期钩子变化：

   • 缓存时：

     • 当组件被缓存时，会触发deactivated生命周期钩子。这个钩子可以用于处理一些需要在组件停止使用时执行的逻辑，比如清除定时器等。

   • 激活时：

     • 当缓存的组件被重新激活时，会触发activated生命周期钩子。这个钩子可以用于处理一些需要在组件重新使用时执行的逻辑，比如重新初始化数据等。与created和mounted不同，activated是在组件从缓存中被重新启用时触发，而created是在组件实例刚被创建时触发，mounted是在组件挂载到DOM后触发。

   • 正常创建和销毁：

     • 如果组件没有被keep - alive包裹，组件正常创建时会依次触发beforeCreate、created、beforeMount、mounted生命周期钩子；销毁时会依次触发beforeDestroy、destroyed。但当被keep - alive包裹后，beforeDestroy和destroyed不会触发，取而代之的是deactivated。同样，再次激活时不会触发beforeCreate、created、beforeMount、mounted，而是触发activated。