keep-alive 组件提供了一个抽象层来缓存子组件,使得当子组件被切换出去再切回来时,它的状态能够被保留下来,而不是重新创建和挂载。
1.1. 不使用 keep-alive 的生命周期顺序
- 父组件 beforeCreate
- 父组件 created
- 父组件 beforeMount
- 子组件 beforeCreate
- 子组件 created
- 子组件 beforeMount
- 子组件 mounted
- 父组件 mounted
1.2. 使用 keep-alive 的生命周期顺序
当使用 keep-alive 缠绕在子组件外面时,情况会有所不同。keep-alive 是 Vue 提供的一个抽象组件,它可以缓存不活动的组件实例而不是销毁它们。这意味着当切换到其他组件时,这些组件的状态会被保存下来,而不会重新初始化。
1.2.1. 初次进入缓存区域
初次进入时,与不使用 keep-alive 相似,因为需要创建并挂载组件。但是,在激活或停用组件时,会有额外的钩子被调用。
- 父组件 beforeCreate
- 父组件 created
- 父组件 beforeMount
- 子组件 beforeCreate
- 子组件 created
- 子组件 beforeMount
- 子组件 mounted
- 父组件 mounted
- 子组件 activated (如果使用了 keep-alive)
1.2.2. 切换离开缓存区域
当从一个被 keep-alive 缠绕的组件切换到另一个组件时:
- 子组件 deactivated (离开缓存区域前触发)
- 新组件 beforeCreate...mounted (新组件的生命周期钩子按照正常的顺序触发)
1.2.3. 再次进入缓存区域
当再次回到之前被 keep-alive 缠绕的组件时:
子组件 activated (回到缓存区域后触发)
注意,由于 keep-alive 的缓存机制,当再次激活被缓存的组件时,不会重新触发 beforeCreate、created、beforeMount 和 mounted 钩子,而是直接触发 activated 钩子。
1.3. 总结
- 首次加载:keep-alive 对于组件的首次加载没有影响,所有生命周期钩子都会按正常顺序触发。
- 切换离开:当组件被切换出去时,会触发 deactivated 钩子。
- 再次进入:当组件再次被激活时,会触发 activated 钩子,而不是重新初始化。
activated 和 deactivated 是 keep-alive 特有的生命周期钩子,它们用于处理组件被激活或停用时的行为。这些钩子可以用来执行一些操作,例如数据刷新或资源释放等。
请确保在 Vue 项目的开发过程中,根据官方文档来了解最新的生命周期钩子和 keep-alive 的行为。