前端tab界面数据缓存和预加载思路

效果

• 点击第5周。缓存第5周数据，并预加载第4、6周数据。
• 继续点击第6周，读取第6周缓存数据，第5周数据已缓存，所以只预加载第7周数据。
• 点击第1周。缓存第1周，预加载第2周，第0周不加载。

代码

<script>
export default {
  data() {
    return {
      dataInit: false
    }
  },
  methods: {
    /**
     * 加载数据
     * @param String week 加载指定周的数据
     * @param Boolean onlyCache 是否仅是缓存逻辑
     */
    loadData(week = '', onlyCache = false) {
      const isFirstLoad = !this.dataInit
      const params = { week: 10 }
      Api.getData({
        ...params
      }).then((res) => {
        const data = res.data
        this.renderPage(data, isFirstLoad, onlyCache)
      })
    },
    /**
     * 渲染数据
     * @param String week 加载指定周的数据
     * @param Boolean isFirstLoad 是否仅是首次加载
     * @param Boolean onlyCache 是否仅是缓存逻辑
     */
    renderPage(pageData, isFirstLoad = false, onlyCache = false) {
      this.asyncCache(pageData, onlyCache)
      if (onlyCache) return
      // 👇执行当前具体业务渲染逻辑
    }
  },
  /**
   * 缓存和预加载数据
   * FETUS_PAGE_CACHE 是缓存头部标识
   * @param Boolean onlyCache 是否仅是缓存逻辑
   */
  asyncCache(pageData, onlyCache) {
    const week = pageData.weeks //当前周
    const cacheData = sessionStorage.getItem(`${FETUS_PAGE_CACHE}${week}`)
    if (!!cacheData) {
      console.log(`${week}周已缓存`)
    } else {
      console.log(`缓存${week}周数据`)
      sessionStorage.setItem(`${FETUS_PAGE_CACHE}${week}`, JSON.stringify(pageData))
    }
    if (week < 41 && !onlyCache) {
      const cacheData = sessionStorage.getItem(`${FETUS_PAGE_CACHE}${week + 1}`)
      if (!!cacheData) {
        console.log(`${week + 1}周已缓存`)
      } else {
        this.loadData(week + 1, true)
      }
    }
    if (week > 2 && !onlyCache) {
      const cacheData = sessionStorage.getItem(`${FETUS_PAGE_CACHE}${week - 1}`)
      if (!!cacheData) {
        console.log(`${week - 1}周已缓存`)
      } else {
        this.loadData(week - 1, true)
      }
    }
  }
}
</script>