keep-alive组件的应用

keep-alive是vue的内置组件，功能是用来缓存组件的，项目的性能将得到提升

比如：首页进入到详情页，如果用户在首页点击了一个东西，请求了一个数据，又回到首页，再请求同一个东西，同样请求同一个数据，就没必要去请求数据了，直接使用keep-alive组件缓存起来。

与生命周期有关的：

如果组件中加入了keep-alive组件，那么生命周期函数将会在原先8个的基础上，新增两个

分别是activated和deactivated，代表进入和离开。进入组件后create只会执行一次

---

接下来开始应用

需求：用户点击4个li标签（vue学习、js学习、css学习、html学习）中的vue学习，发送请求获取数据，用户返回主页，再次点击vue学习，不会再次发送请求。要被keep-alive组件缓存

第一步：app.vue添加keep-alive组件准备缓存组件

<template>
  <div id="app">

     <keep-alive> 
         <router-view/> 
     </keep-alive>

  </div>
</template>

第二步：新建home组件

<template>
	<div>
			
		---这是home组件---
		<ul>
			<li v-for="(item,index) in list" :key="index" @click="goDetail(item.id)">
				<span>{{item.name}}</span>
				<span>{{item.id}}</span>
			</li>
		</ul>

	</div>
</template>

<script type="text/javascript">
export default {
	data () {
		return {
			list: [
				{id:1,name:'vue学习'},
				{id:2,name:'js学习'},
				{id:3,name:'css学习'},
				{id:4,name:'html学习'},
			]
		}
	},
	methods:{
		goDetail(id){
			// this.$router.push("/city")
			this.$router.push({
				path: '/city',
				query: {
					id
				}
			})
			
		},
	},

}
</script>

实现点击vue学习跳去/city组件

路由如下

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import City from '@/components/City'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

第三步：新建city组件 

<template>
	<div>
		这是详情页面
	</div>
</template>
<script>
	export default {
		data(){
			return {
				id:0
			}
		},
		created() {
			this.id = this.$route.query.id
			console.log('created',this.id)
			this.getData()
		},
		methods:{
			getData(){
				this.axios({
					method: 'get',
					url: 'http://localhost:8088/getdata',
				    	params: {
				            id:this.id
				        }
				}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
				})
				
			}
		},
		activated() {
			console.log('记录id=',this.id,'实时ID',this.$route.query.id)
			if(this.id != this.$route.query.id ){
				this.id = this.$route.query.id
				this.getData()
			}
		}
	}
</script>

部分解释如下：

 

 最后展示