【Vue】 关于Vue生命周期activated以及keep-alive的使用

1. activated:{}----是vue的生命周期，指的是激活keep-alive缓存，优化性能，与之对应的生命周期是deactivted。
   例如：

//如果页面中有keep-alive缓存，这个函数会触发
activated(){}

2. keep-alive（缓存）
   使用场景：当A页面跳转到B页面，做完操作之后B页面再返回A页面，这个时候A页面的数据还是存在的，就需要在A页面中使用keep-alive缓存。
   使用方法：keep-alive一般是和路由router-view结合使用的。因为在Vue中页面的跳转是通过路由实现的。
   使用过程：首先在配置页面路由的js文件的指定页面上加meta对象， 在对象中加keepAlive(需要缓存)属性或normal(不需要缓存)属性，然后在页面中(一般都是在项目的主页面中通过判断去写好keep-alive和router-view，这样后面在使用的时候就只需要在页面路由中配置meta对象即可)。
   案例：

route.js

import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
	{
		path:'/xxx',
		name:'测试测试',
		component:xxx,
		meta:{
				keepAlive:true,
				normal:true    //keepAlive和normal两者存在其一即可
			}
	}
]

export default new Router({routes:constantRouterMap })

App.vue

<template>
	<div id="app">
		//keepAlive
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		//或normal
		<router-view v-if="$route.meta.normal"></router-view>
		<keep-alive>
			<router-view v-if="!$route.meta.normal"></router-view>
		</keep-alive>
	</div>
</template>