面试题：Vue中Keep - Alive结合路由实现页面缓存时，activated和deactivated钩子函数在何时触发？

Question

在Vue项目中使用Keep - Alive结合路由实现页面缓存功能，阐述activated和deactivated钩子函数分别在什么场景下会被触发，以及它们通常用于哪些业务逻辑的处理。

Answer 1

activated钩子函数

1. 触发场景：当组件被激活时触发，即被 keep - alive 缓存的组件重新进入页面时。例如，通过路由切换，从其他页面切换到被 keep - alive 缓存的页面，此时该页面组件的 activated 钩子函数会被调用。
2. 业务逻辑处理：
   • 数据更新：可以用于重新获取数据，因为组件被缓存后数据可能不是最新的，例如重新请求接口获取最新的列表数据。
   • 恢复状态：恢复组件在离开时保存的一些状态，如滚动条位置等。

deactivated钩子函数

1. 触发场景：当组件被停用时触发，即被 keep - alive 缓存的组件离开页面时。例如，通过路由切换离开被 keep - alive 缓存的页面，该页面组件的 deactivated 钩子函数会被调用。
2. 业务逻辑处理：
   • 数据保存：保存组件当前的状态数据，以便下次激活时恢复，例如保存表单输入的值。
   • 清理操作：进行一些清理工作，如清除定时器、解绑事件等，避免内存泄漏。