面试题：Vue中Keep - Alive实现组件懒加载与缓存策略的原理是什么

Question

在Vue项目里使用Keep - Alive来实现组件的懒加载与缓存策略，请阐述其基本原理，以及它在生命周期钩子函数方面与普通组件有何不同。

Answer 1

Keep - Alive基本原理

1. 组件缓存：Keep - Alive 是Vue提供的一个抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中。其主要作用是在组件切换过程中，将需要缓存的组件实例保存在内存中，而不是销毁并重新创建组件实例。当组件被 Keep - Alive 包裹时，在组件切换出去时，它不会被销毁，而是被缓存起来，下次再切换回来时，直接从缓存中获取该组件实例，这样就避免了重复创建和销毁组件带来的性能开销。
2. 判断机制：Keep - Alive 有 include 和 exclude 属性。include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存。匹配首先会检查组件自身的 name 选项，如果 name 选项不存在，则匹配它的局部注册名称（父组件 components 选项的键值）。

生命周期钩子函数与普通组件的不同

1. 普通组件：
   • 创建阶段：会依次执行 beforeCreate、created、beforeMount、mounted 钩子函数。
   • 销毁阶段：当组件被销毁时，会执行 beforeDestroy 和 destroyed 钩子函数。例如，一个普通的Vue组件在从页面中移除时，其相关的DOM元素会被移除，组件实例的监听事件会被解绑，数据绑定也会被解除，这些操作都在 destroyed 钩子函数中完成。
2. 被Keep - Alive包裹的组件：
   • 首次进入：会依次执行 beforeCreate、created、beforeMount、mounted 钩子函数，与普通组件相同。
   • 切换出去：此时不会执行 beforeDestroy 和 destroyed 钩子函数，而是执行 deactivated 钩子函数。deactivated 钩子函数在组件被缓存时调用，在这个钩子函数中，可以执行一些类似于暂停动画、取消定时器等操作，但组件实例依然存在，并没有被销毁。
   • 再次切换回来：不会再次执行 created、mounted 等创建阶段的钩子函数，而是执行 activated 钩子函数。activated 钩子函数在组件被激活（从缓存中取出并重新显示）时调用，在这个钩子函数中，可以执行一些类似于恢复动画、重新开启定时器等操作。