面试题：Vue中keep - alive缓存组件与Vue生命周期钩子的关系及应用

Question

在Vue项目中，使用keep - alive缓存了一个组件，当该组件再次被激活时，会触发哪些生命周期钩子？请说明原因并举例说明如何在这些钩子中进行合适的业务逻辑处理。

Answer 1

触发的生命周期钩子

当使用keep - alive缓存的组件再次被激活时，会触发activated生命周期钩子。原因是keep - alive的设计目的是在组件切换时，将组件缓存起来而不是销毁，当再次显示该组件时，就触发activated钩子，通知组件已被激活可以进行相关操作。

举例说明业务逻辑处理

假设在一个文章详情页面，该页面使用keep - alive进行缓存。当用户从其他页面返回该文章详情页时，我们可能希望重新获取文章的最新浏览量数据。

<template>
  <div>
    <h1>{{ articleTitle }}</h1>
    <p>{{ articleContent }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleTitle: '',
      articleContent: '',
      viewCount: 0
    };
  },
  activated() {
    // 模拟获取最新浏览量的异步操作
    this.fetchViewCount();
  },
  methods: {
    async fetchViewCount() {
      try {
        const response = await fetch('/api/article/viewCount?id=' + this.articleId);
        const data = await response.json();
        this.viewCount = data.viewCount;
      } catch (error) {
        console.error('获取浏览量失败', error);
      }
    }
  }
};
</script>

在上述例子中，activated钩子函数中调用fetchViewCount方法，该方法通过fetch获取最新的文章浏览量并更新到组件数据中，实现了合适的业务逻辑处理。