面试题：Vue中Keep - Alive处理组件生命周期时activated和deactivated钩子函数的使用场景

Question

在使用Vue Keep - Alive缓存组件的场景下，activated和deactivated钩子函数分别在什么时候触发？请举例说明这两个钩子函数可以用于哪些实际的业务逻辑，比如数据的加载与清理。

Answer 1

1. 触发时机
   • activated钩子函数：当被keep - alive缓存的组件被激活时触发。例如，在一个多视图切换的应用中，使用router - view展示不同组件，其中某个组件被keep - alive包裹，当从其他视图切换回该组件视图时，若该组件是被缓存的状态，就会触发activated钩子函数。
   • deactivated钩子函数：当被keep - alive缓存的组件失活时触发。还是上述多视图切换的场景，当从被keep - alive缓存的组件视图切换到其他视图时，就会触发deactivated钩子函数。
2. 实际业务逻辑举例
   • 数据加载：
     • 在activated钩子函数中进行数据加载。比如一个新闻详情页面组件被keep - alive缓存，在activated钩子中，可以重新获取最新的评论数据展示，即使页面是从缓存中激活的，也能保证数据的实时性。

     export default {
       activated() {
         this.$axios.get('/api/news/comments/' + this.newsId).then(response => {
           this.comments = response.data;
         });
       }
     }
     

   • 数据清理：
     • 在deactivated钩子函数中进行数据清理。例如，在一个地图展示组件中，可能会创建一些地图相关的定时器（如自动更新地图标记位置的定时器），在deactivated钩子函数中，可以清除这些定时器，避免内存泄漏。

     export default {
       data() {
         return {
           autoUpdateTimer: null
         };
       },
       created() {
         this.autoUpdateTimer = setInterval(() => {
           // 更新地图标记位置的逻辑
         }, 5000);
       },
       deactivated() {
         clearInterval(this.autoUpdateTimer);
       }
     }