近期面试中有被问到 keep-alive 是如何保证每个组件的状态的,其原理是什么?发现自己说的不够清晰特来补充一下:
keep-alive 主要实现以下功能:
1、缓存组件实例: keep-alive 通过缓存动态组件或路由组件来保存它们的状态,当组件第一次被激活时,它会被创建并挂载,而keep-alive 内部有维护缓存列表,可以用来缓存组件实例以及它的状态(数据、计算属性、方法);
2、更改触发的生命周期钩子: 加入缓存的组件不再会触发常用的 created、mounted 等钩子函数,只会触发 activated 和 deactivated 这两个钩子函数;
- activated:当组件被激活时触发
- deactivated:当组件不在被使用(离开这个页面)时触发,组件会呈现 **inactive** 状态
3、复用组件实例: 当之前被缓存的组件再次被激活时,不会被重新创建,而是会从缓存中直接获取并重新挂载,同时会触发 activated 生命周期钩子
- 初始进入和离开 created ---> mounted ---> activated --> deactivated
- 后续进入和离开 activated --> deactivated
4、缓存策略,我们可以通过 include 和 exclude 这两个属性手动控制需要缓存的组件,也可以通过 max 指定缓存的实例个数;其实 keep-alive 内部有通过 LRU(Least Recently Used 最近最少使用)来管理缓存中的组件实例