Vue的keep-alive組件是用來(lái)緩存組件的，可以在組件切換時(shí)保留之前組件的狀態(tài)。使用keep-alive組件可以提高頁(yè)面的渲染性能。在組件生命周期內(nèi)，keep-alive可以監(jiān)聽(tīng)到activated和deactivated這兩個(gè)事件。

export default {
name: 'myComponent',
activated() {
console.log('組件已激活')
},
deactivated() {
console.log('組件已失活')
}
}

當(dāng)組件被緩存時(shí)，activated和deactivated這兩個(gè)生命周期鉤子函數(shù)不會(huì)被觸發(fā)，但keep-alive提供了一個(gè)update生命周期鉤子函數(shù)，它會(huì)在包裹的組件每次被激活時(shí)調(diào)用。

export default {
name: 'myComponent',
activated() {
console.log('組件已激活')
},
deactivated() {
console.log('組件已失活')
},
update() {
console.log('組件更新')
}
}

如上所示，通過(guò)在路由配置中設(shè)置meta屬性的值來(lái)判斷是否需要緩存組件。在組件中加入update生命周期鉤子函數(shù)，在每次組件激活時(shí)進(jìn)行更新操作。