1. 程式人生 > >vue-router2.0組件復用

vue-router2.0組件復用

舉例 由於 被調用 檢測 參考 zh-cn 動態 如果 渲染

在使用vue-router1.x時我們知道對於路由 a/b/c 和 a/b/d , 組件a和組件b將會復用 。具體可以參考:https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/pipeline/README.md

在vue-router2.x 路由對組件的復用也1.x基本是一樣的。

還是舉例 /a/b/c 和 /a/b/d

在這2個路由進行切換時,會檢測到a 和b組件是可以重用的,所以這2個組件在重用時生命周期不會再執行。

對於c和d組件由於不能重用,所以生命周期在切換時會重復執行。

假如c和d組件裏面分別包含了e組件 ,那e組件會不會重用呢 ,經過測試e組件是不會重用的。因為c和d組件沒有重用,生命周期重新執行了,所以e組件相當於會重新加載。

當使用動態路由時,例如從 /user/1導航到 /user/2,原來的組件實例會被復用。因為兩個路由都渲染同個組件,比起銷毀再創建,復用則顯得更加高效。不過,這也意味著組件的生命周期鉤子不會再被調用。

想對路由參數的變化作出響應的話,你可以簡單地 watch(監測變化) $route 對象(註意判斷是否為當前路由)。參考:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

如果有keep-alive需要註意下,keep-alive會對當前路由組件進行緩存,比如 /a/b/c ,如果在/a對應的router-view進行keep-alive,b/c不會繼承keep-alive,不會緩存會重新渲染。相當於存在keep-alive嵌套的情況下,每個keep-alive對於一個子路由,父路由的keep-alive不會繼承到子路由。

比如:/a/b 和/a/c ; 路由/a進行了keep-alive , b、c沒有keep-alive,在切換這2個路由時組件b、組件c都會重新渲染,生命周期會重新執行。

vue-router2.0組件復用