Vue2.5 旅游项目实例18 城市选择页-使用keep-alive优化网页性能
创建分支:city-keepalive
拉取并切换分支:
git pull
git checkout city-keepalive
启动服务,点击右上角的城市进入城市列表页,点击城市再返回到首页,这一系列操作下来,我们在Network里会发现不停的请求 indes.json 和 city.json ,这样性能会降低
如何进行优化?
打开App.vue文件:
<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template>
keep-alive这个是Vue自带的标签,意思是:路由的内容被加载过一次之后,就把路由中的内容放到内存之中,下次在进这个路由的时候,不需要去重新渲染这个组件去重新执行钩子函数,只需要从内存中把以前存储的内容拿出来显示到页面中就可以了。
还有个问题,就是在城市列表页中点击切换城市后,回到首页,首页的数据应该重新请求为相应城市的数据。
打开Home.vue文件:
<script> import { mapState } from 'vuex' export default { computed: { ...mapState(['city']) }, methods: { getHomeInfo () { axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc) } } } </script>
然后切换城市后需要重新发起请求,定义一个lastCity变量:
当用 keepalive 的时候,会多出一个生命周期函数 activated
export default { data () { return { lastCity: '' } }, mounted () { this.lastCity = this.city this.getHomeInfo() }, // 当用 keepalive 的时候,会多出一个生命周期函数 activated activated () { if (this.lastCity !== this.city) { this.lastCity = this.city this.getHomeInfo() } }, }
当上次城市与当前城市不一致时,在此发起ajax请求,并把当前城市存储到上次城市中。而城市列表不管点开多少次,也只发起一次ajax请求。
下面提交代码:
git add . git commit -m "keepalive优化" git push git checkout master git merge city-keepalive git push