那就说明你这个页面就不被包括,没被缓存下来

那就说明你这个页面就不被包括,没被缓存下来

不刷新的话是正常的 比如我从其他页面进入这个页面而不是在这个页面刷新浏览器是可以触发activated的

那就说明你这个页面就不被包括，没被缓存下来

不刷新的话是正常的例如我从其他页面进入这个页面而不是在这个页面刷新浏览器是可以触发activated的

官网文档说: 被 keep-alive 缓存的组件激活时调用。我理解的是先被缓存下来,之后再次进入页面才会激活这个方法,你刷新浏览器当然激活不了咯

浏览器刷新,keep-alive里缓存的组件就会被清除了,其实类似vuex的数据刷新一样,不过vuex有持久化方案罢了

那就说明你这个页面就不被包括,没被缓存下来

不刷新的话是正常的 比如我从其他页面进入这个页面而不是在这个页面刷新浏览器是可以触发activated的

我也遇到了这个问题，我期望的是第一次进入的时候触发created执行一次查询请求，再次进入时触发activated执行一次查询请求。但现在第一次进入created 和 activated会同时触发，就会触发两次查询请求，我现在是使用防抖函数处理同时触发的问题，但我觉得这种写法并不好。楼主有什么好的解决方案吗？

Vue原本運作規則：

• 使用者首次進入頁面：觸發 created, activated，造成重複請求
• 使用者切換 Tag 再回到該頁：觸發 activated
• 使用者重新整理瀏覽器：觸發 created

我添加一個變量叫isFirstEnter來做判斷，以解決重複請求問題
首次進入頁面時會觸發 created, activated ⇒ 變成只觸發 created

另外統整其他進入元件方式

1. 首次進入頁面時只觸發 created
2. 使用者切換 Tag 再回到該頁： activated
3. 使用者重新整理瀏覽器：觸發 created

觸發時都會呼叫 this.initData()
要記得在使用mixin元件上寫個 function initData

const initDataMixin = {
  data() {
    return {
      isFirstEnter: false // 判斷是否第一次進入頁面
    }
  },

  deactivated() {
    this.isFirstEnter = false
    console.log('[deactivated]', this.isFirstEnter)
  },

  methods: {
    // 首次進入頁面時只觸發 created
    createdFun() {
      // isFirstEnter：判斷 activcated 是否要重新取得資料
      this.isFirstEnter = true
      // 第一次進入頁面時請求資料
      console.log('createdFun')
      this.initData()
    },

    activatedFun() {
      console.log('activatedFun', this.isFirstEnter)

      if (!this.isFirstEnter) {
        this.initData()
      }
      this.isFirstEnter = false
    }
  }
}

export default initDataMixin

再到需要引入的清單頁引入此 mixin
請務必引用Mixin的元件上確保有 initData 的 function

import initDataMixin from '@/mixins/initDataMixin.js'
  mixins: [initDataMixin]

範例

created() {
    this.createdFun()
  },
  // 緩存後重新激活元件時，將重新請求資料
  activated() {
    this.activatedFun()
  },

  methods: {
    initData() {
      this.getData()
    }
  }