keep-alive缓存组件

keep-alive是一个抽象组件：他自身不会渲染一个DOM元素，也不会出现在父组件链中，使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive的属性：
include：包含，定义缓存白名单，该属性里定义的组件会被缓存
exclude：定义缓存黑名单，该属性定义的组件将不会被缓存
1.第一种写法

<keep-alive  include="artice,user"  exclude="type">
	<router-view></router-view>
</keep-alive>
//组件里定义name
export default{
    
    
	//定义
	name:"user"
}

//也可以动态写法 ：
<keep-alive :include="['art','user']"   :exclude="['type']">
	<router-view></router-view>
</keep-alive>


2.第二种写法
<keep-alive>
	//需要缓存的组件
	//v-if属性加到keep-alive中不起作用，她是一个抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中
	<router-view  v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

	//不需要缓存的组件
	<router-view  v-if="!$route.meta.keepAlive"></router-view>

//在router路由对象中，在需要缓存的路由中定义，true为缓存，false为不缓存
meta：{
    
    
	keepAlive:false/true
}
``
keep-alive的钩子函数：activated、deactivated
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序
beforeCreate-->created-->beforeMount-->mounted-->activated-->beforeUpdate-->updated
退出时触发：deactivated 
当再次进入（前进或后退）是，只触发activated