使用keep-alive优化网页性能

该笔记为最近项目中的一点经验积累

最近项目，欢迎start

keep-alive：主要用于保留组件状态或避免重新渲染。

比如： 有一个列表页面和一个 详情页面，那么用户就会经常执行打开详情=>返回列表=>
打开详情，这样的话 列表 和 详情 都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

当组件在<keep-alive> 内被切换，在 2.2.0 及其更高版本中，activated 和 deactivated生命周期 将会在 树内的所有嵌套组件中触发。

---

---

在Home.vue和City.vue中的都发送了ajax请求，所以每次页面刷新渲染的时候都会去发送ajax请求，这样无疑增加了网络负担。
因此，通过vue提供的keep-alive来将其保留在内存中来得以实现。

部分代码：

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="stylus" scoped>

</style>

但是，这样又会出一个问题，当我选中好一个城市的时候，返回首页的内容应该是随之变化的，而如果使用了keep-alive的话是直接从缓存中拿取数据了，这样又不能达到我们的目的，那么如何实现呢？
部分代码

<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekends :list="weekendsList"></home-weekends>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekends from './components/Weekends'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendsList: []
    }
  },
  components: {
    HomeWeekends,
    HomeSwiper,
    HomeHeader,
    HomeIcons,
    HomeRecommend
  },
  methods: {
    getHomeInfo () {
      // axios.get()返回的是一个promise对象
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendsList = data.weekendsList
      }
    }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style scoped>

</style>

即在发送ajax的时候添加了参数：axios.get('/api/index.json?city=' + this.city)

当使用keep-alive组件的时候会多出一个Vue的生命周期函数activated

性能优化代码实现:

<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekends :list="weekendsList"></home-weekends>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekends from './components/Weekends'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      lastCity: '',
      // city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendsList: []
    }
  },
  components: {
    HomeWeekends,
    HomeSwiper,
    HomeHeader,
    HomeIcons,
    HomeRecommend
  },
  methods: {
    getHomeInfo () {
      // axios.get()返回的是一个promise对象
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        // this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendsList = data.weekendsList
      }
    }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted () {
    this.lastCity = this.city
    console.log('mounted')
    this.getHomeInfo()
  },
  activated () {
    console.log('activated')
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }
}
</script>

<style scoped>

</style>