使用keep-alive优化网页性能（并解决使用keep-alive是想发送请求的问题）

keep-alive

每一次路由发生切换的时候，ajax都会重新被发送
原因是每一次切换路由的时候，这个组件都会被重新渲染，使用它的mounted钩子就会被重新执行，那么这个ajax数据就会被重新获取

// 在App.vue中router-view显示的是路由所对应的内容
<keep-alive> //这个组件是vue自带的一个组件，他的意思是我的路由的内容被加载过一次之后，我就把路由中的内容放到内存之中，下一次在进入这个路由之中不需要你重新渲染这个组件，不需要你重新执行钩子函数，让你从内存里吧以前的内容拿出来显示就可以了
	<router-view>
</keep-alive>

解决当使用keep-alive是想发送请求的问题

// 当使用keep-alive时，组件会多一个生命周期函数 activated 借助这个生命周期函数就能实现这个功能了
// 他的执行时间是当页面重新被显示的时候
activated {
    
    
	// 这里我们可以判断数据与上一次执行的数据是否相同 如果相同就不发ajax请求，如果不同就再次请求
}
// 可以这样写
data () {
    
    
	return {
    
    
		lastCity: '' // 定义一个值为空
	}
}
// 当页面被挂载后
mounted () {
    
    
// 对上一次的数据做一个保存
	this.lastCity = this.city
	this.getHomeInfo()
}
// 当页面被重新激活的时候
activated () {
    
    
// 当与上次数据不同是就重新发一下ajax请求
	if (this.lastCity !=== this.city) {
    
    
	// 让上一次的值跟着发生改变
		this.lastCity = this.city
		// 调用ajax请求的那个函数
		this.getHomeInfo()
	}
}