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

相关文章

来自专栏ImportSource

针对事件驱动架构的Spring Cloud Stream

今天我们要分享一个比较有意思的内容。就是如何通过spring cloud 的stream来改造一个微服务下事件驱动的框架。 为什么要改造?我们都知道事件驱动的微...

3678
来自专栏青枫的专栏

事件监听机制的通俗解释

511
来自专栏jeremy的技术点滴

免编译在JSP中直接写react代码

3535
来自专栏美团技术团队

Redux从设计到源码

本文主要讲述这三方面内容: Redux 背后的设计思想 源码分析以及自定义中间件 开发中的最佳实践 Redux背后的设计思想 在讲设计思想前,先简单讲下Red...

3576
来自专栏猿人谷

Portal-Basic Java Web应用开发框架V3.0正式发布(源码、实例及文档)

Portal-Basic Java Web应用开发框架(简称 Portal-Basic)是一套功能完备的高性能Full-Stack Web应用开发框架,内置稳定...

1899
来自专栏祝威廉

Spark UI (基于Yarn) 分析与定制

有时候我们希望能对Spark UI进行一些定制化增强。并且我们希望尽可能不更改Spark的源码。为了达到此目标,我们会从如下三个方面进行阐述:

582
来自专栏彭湖湾的编程世界

【react】利用prop-types第三方库对组件的props中的变量进行类型检测

1.引言——JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方。javascript很多时候就是这么一个熊...

2046
来自专栏iKcamp

微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染

§ 详情 - 数据渲染 本文配套视频地址: https://v.qq.com/x/page/x055550lrvd.html 开始前请把 ch4-2 ...

1998
来自专栏Coding01

简述 Laravel Model Events 的使用

最近一直在思考如何利用 Laravel,更进一步做出一套较为不一样的开发框架出来。反复看了很多有关 Laravel 框架的资料和文档,最后还是落在 Larave...

502
来自专栏向治洪

React Native运行原理解析

Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (reac...

5268

扫码关注云+社区