在vue的keep-alive中，组件激活时，如何判断是第一次加载还是从缓存中加载？

keep-alive页面第一次进入会调用mounted、activated，后续进入会调用activated。

export default {
  name: "PageA",
  data() {
    return {
      isFirstLoad: true, // 页面是否初次加载
    }
  },
  mounted() {
    // 初次进入页面的执行逻辑
    // ...
    this.fetchOrderList() //获取订单列表
  },
  activated() {
    if (!this.isFirstLoad) {
      // 非初次进入页面的执行逻辑
      // ...
      this.resetParamas()
      this.fetchOrderList()
    }
    if (this.isFirstLoad) this.isFirstLoad = false
  },

实际示例：

实现一个典型的缓存场景：首页-列表-详情，从详情返回列表不刷新，从首页进入列表刷新

export default {
  name: "OrderList",
  data() {
    return {
      fromRouteinfo: {}, // 进入页-路由信息
      isFirstLoad: true, // 页面是否初次加载
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromRouteinfo = from
    })
  },
  mounted() {
    // 初次进入页面的执行逻辑（此处即从首页初次进入时）
    this.fetchOrderList() //获取订单列表
  },
  // 详情返回仅调用 activated
  activated() {
    //非初次 && 非详情页面进入时才执行 （此处即从首页二次进入时）
    if (!this.isFirstLoad && this.fromRouteinfo.name !== "detail") {
      this.resetParamas()
      this.fetchOrderList()
    }
    if (this.isFirstLoad) this.isFirstLoad = false
  },