前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue填坑记录:serverCacheKey缓存

vue填坑记录:serverCacheKey缓存

原创
作者头像
shirishiyue
发布2018-11-05 11:10:42
2K0
发布2018-11-05 11:10:42
举报
文章被收录于专栏:全栈码

服务器端渲染时,缓存是一个逃不开的优化点,降低node server 负载,提高QPS。

官方例子中 https://github.com/vuejs/vue-hackernews-2.0,里面有用到组件级缓存和页面及缓存。

VUE SSR 官方文档缓存介绍:https://ssr.vuejs.org/zh/guide/caching.html

在公共组件 Item.vue 里,我们应用了组件缓存,代码如下:

代码语言:javascript
复制
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,显示中效果是这样的,

看到图中圈圈没有,圈圈部分刚好事 Item.vue 的内容。。。。。。上图是中了缓存了。

serverCacheKey,主要是定义缓存的key,看看咱们这个key的内容,是这个:

代码语言:javascript
复制
${id}::${__lastUpdated}::${timeAgo(time)}

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

代码语言:javascript
复制
  undefined::undefined::undefined 

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

▲ 处理办法:

为 Item 添加参数 id,修改serverCacheKey为:

代码语言:javascript
复制
serverCacheKey: props => props.item.id,

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

代码语言:javascript
复制
serverCacheKey: props => props.item.id + '::' + props.item.last_updated

▲ 结果就好了

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档