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,显示中效果是这样的,

看到图中圈圈没有,圈圈部分刚好事 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

▲ 结果就好了

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Openlayers4中地图的导出

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

2112
来自专栏美奔科技

web站点应用之路_wdcp面板部署篇(一)

熟悉的人都知道,搭建web几乎是最简单的了,一般有两种方式来搭建web站点.一种是自己先安装各类环境,比如php+apache+mysql ,或者是asp.ne...

1824
来自专栏电光石火

eclipse汉化

以前一直没发出来,今天整理时发现就发出来了! Eclipse对于语言包建立了新的子项目,叫做Babel。网址为:http://www.eclipse....

23510
来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

3689
来自专栏python学习之旅

Python笔记(一):安装+爬虫环境配置+打包为EXE文件

1、     安装 https://www.python.org/downloads/windows/ 到官网下载安装程序 Windows x86      ...

42610
来自专栏web

记一次webpack打包优化

2066
来自专栏Unity

天天德州-海外版-Unity多语言配置实现

不同类型的文本实现不一样,思路是一致的,首先生成本地配置描述,在运行时脚本根据语言类型读取配置数据。

4123
来自专栏电光石火

eclipse汉化

以前一直没发出来,今天整理时发现就发出来了!

2105
来自专栏Android自学

android studio如何修改包名

2943
来自专栏ml

linux学习笔记

一些比较重要的热键:             Ctrl + D   相当于注销字母: quit;             • cd:变换目录          ...

3428

扫码关注云+社区