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优化网页性能
原文地址：https://www.cnblogs.com/superlizhao/p/9676071.html