對于Vue的面試來說,一個重要的知識點就是keepalive,也即 Vue Router 的生命周期鉤子中的keep-alive屬性。它可以緩存組件實例,避免重復渲染。
當我們訪問到一個有keep-alive的組件時,Vue會首先渲染該組件并創建實例,然后把該組件的實例緩存起來。當從該組件切換到其他組件時,該組件實例并不會被銷毀,而是被緩存。當再次訪問該組件時,直接從緩存中取出實例并重新掛載到DOM上,這樣可以減少重新渲染的開銷,提高應用的性能。
<keep-alive>
<router-view></router-view>
</keep-alive>
通過上面的代碼,我們可以將router-view標簽嵌套在keep-alive標簽內,就可以使用keepalive來緩存該組件實例。同時,我們還可以通過設置include和exclude屬性來指定需要或者排除不需要緩存的組件,例如:
<keep-alive include="componentA">
<router-view></router-view>
</keep-alive>
上面的代碼中,我們通過include屬性指定了需要緩存的組件為componentA,這樣在訪問到該組件時就會進行緩存。而exclude屬性則是用來排除不需要進行緩存的組件,例如:
<keep-alive exclude="componentB">
<router-view></router-view>
</keep-alive>
此時,訪問到componentB時就不會進行緩存了。
除此之外,還有一些鉤子函數可以幫助我們更好地使用keepalive,例如activated和deactivated鉤子函數。當組件被激活時,activated鉤子函數會被調用,而當組件被停用時,deactivated鉤子函數會被調用。
export default {
name: 'componentA',
activated() {
// 組件被激活時的邏輯
},
deactivated() {
// 組件被停用時的邏輯
}
}
通過上面的代碼,我們可以在組件被激活或者停用時執行相應的邏輯,例如在組件被激活時重新加載數據,在組件被停用時清除定時器等等。
綜上所述,keepalive是Vue中一個非常重要的知識點,它可以幫助我們提高應用的性能,避免重復渲染,同時還可以通過一些鉤子函數來實現更多的功能。