keep-alive 生命周期

作用

keep-alive 是 Vue 提供的一个内置组件，用来对组件进行缓存，在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

1. 常规生命周期钩子的变化

• 首次加载（组件被创建并缓存）：
  • created → mounted → activated
• 缓存后再次激活（组件从缓存中恢复显示）：
  • 触发 activated。
  • 不再触发 created、mounted 等初始化钩子。
• 组件被切换隐藏（但仍在缓存中）：
  • 触发 deactivated。
  • 不会触发 beforeDestroy 和 destroyed（因为组件未被销毁）。
• 组件页面关闭
  • 触发 deactivated → beforeDestroy → destroyed

2. keep-alive 特有的生命周期钩子

• activated()

  • 触发时机：当被 keep-alive 缓存的组件激活时调用。也就是说，当组件从缓存中被重新显示到页面上时，会触发该钩子函数。
  • 使用场景：常用于在组件重新显示时进行数据的重新加载、状态的恢复等操作。

• deactivated()

  • 触发时机：当被 keep-alive 缓存的组件停用时调用。即组件被隐藏，进入缓存状态时，会触发该钩子函数。
  • 使用场景：常用于在组件进入缓存前进行一些清理工作，如取消定时器、取消网络请求等。

3. 注意事项

• 更新相关钩子（如 beforeUpdate 和 updated）：
  • 在激活状态下，组件仍会正常触发更新钩子。
• 动态组件或路由切换：
  • 使用 include/exclude 控制缓存范围时，未被缓存的组件会正常触发销毁钩子。
• max 属性限制：
  • 当缓存数量超过 max，最久未使用的组件会被销毁，触发 beforeDestroy 和 destroyed。