用keep-alive做网络优化

用keep-alive做网络优化

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

这里我们直接在App.vue的元素外层添加了keep-alive，这样就不会每次页面跳转就重新渲染dom元素，并且发送ajax请求。

例如我们有首页和城市列表页面两个页面，在没有加keep-alive之前两个页面每次显示都会发送ajax请求，这样的话页面性能特别不好。

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

页面的逻辑应该为：首页和城市列表页面在首次打开时才发送ajax请求获得json数据；首页的城市发生变化时才发送ajax请求对应的json数据

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

首页组件

// 获取vuex城市
import {mapState} from 'vuex'
export default {
	// 记录原先的城市
	data () {
		lastCity: ''
	}，
	computed: {
   		 ...mapState(['city'])
  	},
  	methods: {
  		getHomeInfo () {
	      axios.get('/api/home.json?city=' + this.city)
	        .then(this.getHomeInfoSucc)
	    },
	    getHomeInfoSucc (res) {
	      res = res.data
	      if (res.ret && res.data) {
	        const data = res.data
	        this.bannerList = data.swiperList
	        this.navsList = data.navsList
	        this.contList = data.contList
	        this.navList = data.navList
	      }
	    },
  	｝,
  	mounted () {
  		// 只有在页面第一次打开的时候mounted才会被执行
  		this.getHomeInfo()
  		//记录城市
  		this.lastCity = this.city
	}，
	
	activated () {
		// 在每次页面重新显示的时候activated函数都会被执行
		// 判断城市是否变化，变化了修改lastCity，并发送请求
		if (this.lastCity !== this.city) {
	      this.lastCity = this.city
	      this.getHomeInfo()
	    }
	}
｝