使用keep-alive优化网页性能

1. 创建项目分支city-keepalive并拉到线下：

• Bug:
  每次我们点击切换首页和城市列表页面即路由被切换的时候，都会触发一次ajax请求，原因是每次路由切换到首页这个组件的时候，页面都会被重新的渲染，然后渲染完成之后就会执行mounted这个钩子，这个ajax的数据就会被重新获取。事实上我们希望获取一次就可以了，不然性能上很低。
  
• 解决：
  打开main.js，城市的入口组件是app.vue，打开app.vue，router-view显示的是路由所对应的内容，将其包裹在keep-alive标签中，keep-alive是vue自带的标签，表示的是我的路由的内容被加载过一次之后，我就将路由中的内容放在内存之中，下一次再进“这个”路由的时候，不需要再重新渲染这个组件，重新执行组件中的钩子函数，只需要将内存中的内容拿出来显示在页面上就可以了。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
  

2. 逻辑问题

• Bug：
  我们要求切换到哪一个城市的时候，首页应该展示的是当前选择城市的页面，所以首页城市改变的时候，还是需要重新加载一下ajax请求：
• 解决：
  打开Home.vue，引入mapState：
  
  改写ajax请求，实际上我请求这个接口的时候，应该带一个参数叫做city，表示vuex里存的当前我所在的城市：
  
  加一个计算属性：
  
  之后发ajax请求的时候，就可以将city放在请求的参数里面：
  
  当我们第一次进页面的时候，对index.json进行请求，可见在我们请求参数的最后已经携带了北京这个参数：
  
• 再回到三亚的首页，虽然城市变成了三亚，但是下面的内容展示还是北京的页面内容，所以切换回首页的时候还是需要进行一次ajax请求。回到app.vue，我们说我们之前请求过的数据已经被缓存起来了，那我们是不是就不能改变缓存里的数据了呢？其实当我们用keepalive的时候，我们的组件中会多出一个生命周期函数—activated：
  
  当我们刚进入首页的时候，会执行mounted和activated，但是当我们点击其他城市再次进入首页后，不会再执行mounted触发的ajax请求，但是activated会继续执行。我们可以这样做，在每次页面重新显示的时候，可以判断当前的页面城市和上一次页面显示的城市是否是相同的，如果不相同，就再发一次ajax请求。我们设置一个参数lastCity’’：
  
  当元素被挂载的时候，我们使：
  
  当页面被重新激活的时候，我们使：
  

3. 提交到线上