keep-alive
作用:對(duì)組件進(jìn)行緩存胰蝠,提高性能歼培。
說明:啥意思呢?有兩個(gè)組件A茸塞、B躲庄。我們?cè)贏組件上操作的數(shù)據(jù),此時(shí)我們切換到組件B钾虐,再切換到A組件噪窘,A組件并不會(huì)重新渲染,而是保存之前的狀態(tài)效扫。
keep-alive是一個(gè)抽象標(biāo)簽倔监,不會(huì)被渲染承具體的dom元素。這點(diǎn)與template類似菌仁。
<keep-alive :include="componentsList">
<router-view></router-view>
</keep-alive>
其中浩习,
include(包含)屬性是一個(gè)被緩存組件name的數(shù)組。其中的組件都會(huì)被緩存济丘。
exclude(排除)屬性是一個(gè)不被緩存組件name的數(shù)組谱秽。其中的組件都不會(huì)被緩存。
注意:是組件的name屬性摹迷,不是路由的name屬性弯院。
如果需要緩存的頁面太多,在數(shù)組中一個(gè)個(gè)添加name泪掀,顯然有點(diǎn)太繁瑣了。利用meta屬性來進(jìn)行控制我們需要進(jìn)行緩存的頁面:
方法:在路由meta設(shè)置是否進(jìn)行緩存的標(biāo)記
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被緩存的組件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被緩存的組件
}
]
在router-view中進(jìn)行判斷颂碘,需要緩存則放入keep-alive標(biāo)簽中异赫。
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--這里是會(huì)被緩存的組件-->
</keep-alive>
<router-view v-if="!this.$router.meta.keepAlive"></router-view>
<!--這里是不會(huì)被緩存的組件-->
activated鉤子函數(shù)
什么時(shí)候調(diào)用椅挣?
答:進(jìn)入已經(jīng)緩存的頁面時(shí),觸發(fā)的鉤子函數(shù)塔拳。
記资笾ぁ:包含了keep-alive的組件,created()靠抑、mounted()都只會(huì)觸發(fā)一次量九。但是activated每一次進(jìn)入組件,都會(huì)觸發(fā)一次哦~