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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

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

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

3229
来自专栏Golang语言社区

Golang 通用连接池

资源链接 https://github.com/silenceper/pool pool GoDoc Golang 实现的连接池 功能: 连接池中连接...

3108
来自专栏ml

linux学习笔记

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

3298
来自专栏GIS讲堂

Openlayers4中地图的导出

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

1432
来自专栏云计算认知升级

【腾讯云的1001种玩法】Laravel 整合 COS 对象存储服务,享受无限容量存储服务

使用Laravel 也可以轻松接入腾讯云对象存储,只需要执行简单的几行命令,就可以轻松在你的Laravel项目中,享受COS提供的海量数据存储能力。

1.3K0
来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

8K5
来自专栏黑泽君的专栏

通过数据库中的表,使用 MyEclipse2017的反向生成工具-->hibernate反转引擎引擎(MyEclipse2017自带的插件) 来反转生成实体类和对应的映射文件

1、在MyEclipse中,Java视图下,新建一个普通的java project,新建该项目的目的是:用来接收反转引擎生成的实体类和对应的映射文件。

952
来自专栏Python爬虫与算法进阶

GitHub上超9Kstars的Python爬虫项目——pyspider(国人编写)

A Powerful Spider(Web Crawler) System in Python 简介 PySpider:一个国人编写的强大的网络爬虫系统并带有强...

3787
来自专栏web

记一次webpack打包优化

1775
来自专栏python学习之旅

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

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

41310

扫码关注云+社区