面试题：Vue中Keep - Alive缓存组件状态，activated和deactivated钩子函数的使用场景是什么

Question

在Vue中使用Keep - Alive缓存组件状态时，activated和deactivated钩子函数会在特定时机被调用。请阐述这两个钩子函数的触发时机，并举例说明它们常见的使用场景。

Answer 1

1. activated钩子函数

• 触发时机：当被keep - alive缓存的组件激活时调用。也就是当组件从缓存中被重新渲染到页面上时触发。
• 常见使用场景：
  • 恢复数据状态：比如一个列表页组件，在离开该页面时被缓存，再次回到该页面时，可能需要恢复之前的滚动位置、选中状态等。例如在一个商品列表页，用户滚动到了某个位置，离开页面后再次回来，希望能回到之前的滚动位置。

  <template>
    <div>
      <ul ref="list">
        <li v - for="(item, index) in items" :key="index">{{item}}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        items: [],
        scrollPosition: 0
      };
    },
    activated() {
      if (this.scrollPosition) {
        this.$refs.list.scrollTop = this.scrollPosition;
      }
    },
    deactivated() {
      this.scrollPosition = this.$refs.list.scrollTop;
    }
  };
  </script>
  

  • 重新请求数据：如果组件内的数据在一定时间后可能过期，在激活时可以重新请求最新数据。例如一个实时数据展示组件，隔一段时间需要获取最新数据。

2. deactivated钩子函数

• 触发时机：当被keep - alive缓存的组件停用时调用。即组件从页面上移除并被缓存起来时触发。
• 常见使用场景：
  • 保存组件状态：如上述例子中保存列表的滚动位置。也可以保存表单的填写状态等，避免用户重新填写。
  • 取消定时器或事件监听：如果组件内设置了定时器（如setInterval）或添加了全局事件监听，在组件停用的时候需要清除这些定时器和事件监听，以避免内存泄漏。例如在组件内监听了window的resize事件，在停用组件时取消该监听。

  <template>
    <div>
      <!-- 组件内容 -->
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      window.addEventListener('resize', this.handleResize);
    },
    deactivated() {
      window.removeEventListener('resize', this.handleResize);
    },
    methods: {
      handleResize() {
        // 处理窗口大小变化的逻辑
      }
    }
  };
  </script>