vue填坑记录：serverCacheKey缓存

服务器端渲染时，缓存是一个逃不开的优化点，降低node server 负载，提高QPS。
官方例子中 https://github.com/vuejs/vue-hackernews-2.0，里面有用到组件级缓存和页面及缓存。
VUE SSR 官方文档缓存介绍：https://ssr.vuejs.org/zh/guide/caching.html
在公共组件 Item.vue 里，我们应用了组件缓存，代码如下：

export default {
  name: 'news-item',      //必须定义，如果要用下面的组件缓存 serverCacheKey
  props: ['item'],
  //组件级别缓存   http://ssr.vuejs.org/en/caching.html#component-level-caching
  serverCacheKey: ({ item: { id, __lastUpdated, time }}) => {
    console.log('serverkey:',id);
    return `${id}::${__lastUpdated}::${timeAgo(time)}`
  }
}

本应用的两个view components，/hero 和 /tool 都用了公共组件 Item.vue，显示中效果是这样的，

image.png

看到图中圈圈没有，圈圈部分刚好事 Item.vue 的内容。。。。。。上图是中了缓存了。
serverCacheKey，主要是定义缓存的key，看看咱们这个key的内容，是这个：

${id}::${__lastUpdated}::${timeAgo(time)}

id, __lastUpdated, time 这三个数据，都是 组件参数 item 对象的属性，作为缓存key。由于我自己的例子中，没有这三个参数，导致key的值都是：

undefined::undefined::undefined 

一个缓存样本，所有的都用了。

▲ 处理办法：

为 Item 添加参数 id，修改serverCacheKey为：

serverCacheKey: props => props.item.id,

或者，再加一个可用于缓存的 last_updated，

serverCacheKey: props => props.item.id + '::' + props.item.last_updated

▲ 结果就好了

image.png