vue-使用keep-alive优化网页性能

Posted 2021-01-07 superlizhao

export default{
  name: ‘Home‘,
  data () {
    return {
      iconList: [],
      recommendList: [],
      swiperList: [],
      weekendList: []
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekmend
  },
  methods: {
    getHomeInfo () {
      axios.get(‘/api/index.json‘)
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      if (res.data.ret && res.data.data) {
        const data = res.data.data
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.swiperList = data.swiperList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

每次从city页切换回home页面的时候mounted这个钩子都会执行，ajax都会被重新获取，性能需要优化。

用keep-alive,keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

app.vue

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

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

　　keep-alive生命周期钩子函数：activated、deactivated,使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。