去哪儿-15-keep-alive

2024-05-20 23:38:41

目标：使用Vue内置标签keep-alive实现对首页和城市选择页的性能优化

在浏览器中Network下的XHR可以发现，在每一次发生页面切换的时候都会有一次ajax请求，原因是：比如在Home.vue中，每一次页面更新的时候页面都会被重新渲染，所以它的mounted生命周期钩子就会就会重新执行，ajax数据就会被重新获取。每一次都要发出ajax请求，性能是很低的，能不能在请求一次后将内容存储起来？

找到程序的入口组件App.vue，<router-view>显示的是路由所对应的内容，可以在<router-view>外部包裹一个<keep-alive></keep-alive>标签，这个标签是vue自带的一个标签。这个标签的意思是：路由的内容被加载过一次之后就把路由中的内容放到内存之中，下次再进这个路由的时候就不需要重新渲染这个组件，只需要从以前的内存中将数据拿出来显示在页面上就可以了。

一个逻辑问题：首页是上海的时候显示上海的内容，当在城市选择页选择北京的时候，首页应该显示的是北京的内容，所以，在城市改变的时候，首页还是需要再重新加载一次ajax请求的。

代码调整：
在Home.vue组件中，发送ajax请求的时候应该是：

getHomeInfo () {axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc)
}

其中的this.city是引入vuex后使用计算属性得到的当前城市，即：

computed: {...mapState(['city'])
}

当在App.vue中使用<keep-alive></keep-alive>将路由包裹起来的时候，这块的内容已经被缓存起来了，切换城市的时候也是取的缓存中的数据。

当使用keep-alive的时候，组件中会多出一个生命周期函数activated，两个生命周期函数钩子console.log一下会发现，当页面首次加载的时候mounted和activated都会执行，当在城市选择页面切换一个页面的时候，组件的mounted是不会执行的，只有activated会执行。也就是说在页面初次加载的时候，一定会发一个ajax请求，当页面重新被显示的时候activated一定会被重新执行。

我们可以判断当前显示的页面城市与上次存储的页面城市是不是同一个，不同的时候再去发一个ajax请求。

在Home组件中的data中定义一个变量lastCity，当页面被挂载的时候，对这个城市做一个保存this.lastCity = this.city。当页面被重新激活的时候,执行以下操作:

mounted () {this.lastCity = this.citythis.getHomeInfo()
},
activated() {if (this.city !== this.lastCity) {this.lastCity = this.citythis.getHomeInfo()}}

代码提交

去哪儿-15-keep-alive相关推荐

web前端设计师需要常去的15个设计博客资源站
Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处.本文向大家推荐15个非常不错的设计博客. 1. ...
python正则匹配字母后面四位数字_怎么写一条正则去匹配15位、18位、还有最后一个字符为字母的身份证号...
大佬们,我想用一条正则表达式在一堆字符串里面去匹配匹配15位.18位.还有最后一个字符为字母的身份证号.那一堆字符串如下: |_ Potentially risky methods: TRACE |_ ...
Web前端工程师常去的15个技术网站
1.CSDN 网址:https://www.csdn.net/ 简介: CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务 ...
关于学计算机趣味段子,【学习段子】_关于学习的经典段子15句
1. 某同学背单词迎战四级,竟然累倒生病住院,朋友来到病房探望.在病床边,朋友握起他的手:"你还好吧?医生怎么说?"同学说:"doctorx"-- 2. 学习不 ...
去面试却被问的哑口无言，是不是踏入了机器学习误区
最近秋招已经进入尾声,有不少朋友反馈,面试的过程中,面试官提到的许多常见机器学习算法相关问题都没有准确的回答出来,相关简略代码的现场演示也没有成功写出来,经常被问得哑口无言,最终也没有获得好的Offe ...
TOM带你玩充电篇三：15款5号电池横评及选购建议——南孚金霸王小米宜家耐时品胜一个都逃不了...
双鹿电池的几个版本理论上来说性价比:绿骑士>金骑士>黑骑士>蓝骑士绿骑士和金骑士都很不错.哪个便宜买哪个. 小米性价比虽然最高,但是超市买不到. 蓝骑士是普通碳性电池,黑骑士是高 ...
c语言15-puzzle解法,15 Puzzle (4乘4谜题) IDA*(DFS策略与曼哈顿距离启发) 的C语言实现...
大家好!这是我的第一篇博客,由于之前没有撰写博客的经验,并且也是初入计算机和人工智能领域,可能有些表述或者理解不当,还请大家多多指教. 一.撰写目的由于这个学期在上算法与数据结构课程的时候,其中一个 ...
15条建议，把技术成果写成一篇高质量学术论文
作者:汪晟达摩院数据库与存储实验室引言随着技术的不断沉淀,研发团队对通过发表学术论文向业界分享研究成果的诉求也愈发强烈.但对许多研发团队而言,论文撰写的相关问题较难把握,例如:如何评估已取 ...
阿里巴巴最新开源项目 - [HandyJSON] 在Swift中优雅地处理JSON
项目名称:HandyJSON 项目地址:https://github.com/alibaba/handyjson 背景 JSON是移动端开发常用的应用层数据交换协议.最常见的场景便是,客户端向服务端发 ...
HandyJSON：Swift语言JSON转Model工具库
背景 JSON是移动端开发常用的应用层数据交换协议.最常见的场景便是,客户端向服务端发起网络请求,服务端返回JSON文本,然后客户端解析这个JSON文本,再把对应数据展现到页面上. 但在编程的时候,处 ...

最新文章

热门文章