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

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钩子中获取数据的任务。

巴特西

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

最新文章

热门文章