Nuxt.js 踩坑笔记 - 缓存向

零、前言

　　最近参与了一个立足 seo 的移动端项目，公司前端工程主栈 vue，所以理所当然的用上了 nuxt，UI 主要选择了 Vant。

 

一、公共列表页的缓存

　　公共列表页由于数据量较大，故需要滚动触发分次加载以模拟分页，当客户端加载到了一定页数之后(>= 2)，点击某条数据进去查看详情，然后返回列表页，这时候如果没有缓存的话，列表页会按照初始参数(即从分页 1 开始)发请求拉数据，并且丢失浏览位置。一方面，浪费请求资源，另一方面，用户体验不佳。因此，针对这两个问题，最后决定开启缓存。

　　vue 中的缓存直接使用 <keep-live> 组件即可，配合上 vue-router 中的 scrollBehavior 往往能比较容易地实现。当然这里容易有忽略：“scrollBehavior 只在支持 history.pushState 的浏览器中可用。” 接受三个参数，to, from, savedPosition, 而 savedPosition “当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。” 这意味这个参数着只有 this.$router.go(...) 有效，this.$router.push() 时是无效的！并且，我们在使用 <keep-live> 时，通常会在自定义的路由中添加某些字段，但 nuxt 的路由是自动生成的，这里是最大的限制。

　　这里有一个前置，在 nuxt.js 的 1.x 某个更新中， <nuxt> 和 <nuxtChild> 组件添加了 keepAlive 属性。于是我们可以在 default.vue 中定制这个属性：

<nuxt :keep-alive='viewCache' :keepAliveProps="{include: includeArr}"/>

data() {
  return {
    cache: false,
    includeArr: ['list-name-1', 'list-name-2'] // 组件的 name
  }
}

watch: {
  '$route': function(new, old) {
    if (...) {
      this.cache = true;
    } else {
      this.cache = false;
    }
  }
}

然后，在跳转进入列表页的组件上绑定相应的参数，从而控制是否需要缓存，如：

this.$router.push({
  name: 'list-name-1',
  params: {
    cache: true
  }
})

最后，绑定 keepAliveProps 是为了避免多余组件的缓存.

另外，从列表页跳转详情页的时候，也需要加上控制字段，如：

this.$router.push({
  name: 'details-name-1',
  params: {
    details_id: xxxxx,
    cache: true
  }
})

并且，从详情页返回时，也需要加上控制字段，如

this.$router.push({
  name: 'list-name-1',
  params: {
    cache: true
  }
})

　　至此，可以解决请求浪费，列表数据缓存的问题，同时，缺点也比较明显，需要在父组件/列表页/详情页同时添加控制字段才能实现，耦合度较高，并且，用户在列表页刷新一下即失效。

　　其次，对于滚动条位置记录，在多番尝试之后，也没有一个较便捷的方法。原因除上文中提到的 savedPosition 的限制以外，与列表数据的缓存也有关系：整个页面的高度需要由数据撑开，然后才能进行滚动。下面是我的解决方案，依赖上文中的组件(数据)缓存：

  

　　由于列表页不进行 ssr, 故在使用 keepAlive 时同时可以使用 vue 的 activated/deactivated 这两个生命周期：

activated() {
  setTimeout(() => {
    window.scrollTo(0, this.scrollPosition);
    // window.scrollTo({
    //   top: this.scrollPosition,
    //   behavior: "smooth"
    // });
  }, 0)
},
deactivated(){
  this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}

 

　　这里需要注意的是要使用 setTimeout (或者this.$nextTick()，不过我尝试的时候没有效果)，否则不会滚动。

　　当然，这里也存在一定的问题， window.scrollTo(x, y) 动作是瞬间完成的，因此可能会存在一定的闪烁情况，而使用 window.scrollTo({..., behavior: "smooth" }) 则在每次用户返回的时候都会有个明显的下滑动作，所以，如何取舍，应当依据实际情况。

 

附上对列表数据缓存的实践和资料：

* (未尝试) 使用服务器缓存 - https://juejin.im/post/5b2b62096fb9a00e61494b0b

* ✗ 使用 van-popup/dialog 组件 - 但是会引起 asyncData 中的传值收值

* ✗ this.$router.go 函数 - 无法缓存

* ✗ 使用 $store + van-popup/dialog，_details 是页面级组件，如果使用 import 导入将不会触发 asyncData 方法，从而导致某些依赖性数据为 undefinded, 最终在 rendering 过程报错。

 

二、动态路由

　　同一个文件夹下不应该存在两个及以上的 _xxx.vue (动态)组件。

 

三、生命周期

　　nuxt.js 的服务端渲染过程基于 node，所以其某些周期是运行在服务端的，在引入第三方插件，或者直接在代码中使用 window 和 document 时，控制台会给出警告：window 未定义。

　　解决办法有两种：

　　　　1、使用 process.browser 来区分环境，如：

if (process.browser) {
  // 修改window对象下某一属性
  window.mbk =  ...
}

　　　　2、在 mounted 以及之后的周期中使用；