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

 

posted on 2020-03-20 17:10  JoeYoung  阅读(263)  评论(0编辑  收藏  举报