以vue提供了乙個內建元件keep-alive
來快取元件內部狀態,避免重新渲染。(在開發vue專案的時候,有一部分部分元件是沒必要多次渲染的)
keep-alive屬性:
include- 字串或正規表示式。只有匹配的元件會被快取。
exclude- 字串或正規表示式。任何匹配的元件都不會被快取。
用法:
快取動態元件:
包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們(此種方式並無太大的實用意義)。
1">
快取路由元件:
使用keep-alive
可以將所有路徑匹配到的路由元件都快取起來,包括路由元件裡面的元件,keep-alive
大多數使用場景就是這種。
方式一:vue檔案中
方式二:router.js中
}]}
快取你想要快取的:
使用v-if
通過路由元資訊判斷快取哪些路由
//router配置
new router(},}
]});
生命週期鉤子:
在被keep-alive
包含的元件/路由中,會多出兩個生命週期的鉤子:activated
與deactivated
activated在元件第一次渲染時會被呼叫,之後在每次快取元件被啟用時呼叫
deactivated:元件被停用(離開路由)時呼叫
注意:使用了keep-alive
就不會呼叫beforedestroy
(元件銷毀前鉤子)和destroyed
(元件銷毀),因為元件沒被銷毀,被快取起來了。
我不想把查詢條件和查詢結果被快取,那麼我可以這樣寫:
mounted: function() ,
activated: function ()
新增屬性:
include:匹配的 路由/元件 會被快取
exclude:匹配的 路由/元件 不會被快取
include和exclude支援三種方式來有條件的快取路由:採用逗號分隔的字串形式,正則形式,陣列形式。
正則和陣列形式,必須採用v-bind形式來使用。
快取元件的使用方式:
注:當元件被exclude
匹配,該元件將不會被快取,不會呼叫activated
和deactivated
。 keep alive的使用及注意點
以vue提供了乙個內建元件keep alive來快取元件內部狀態,避免重新渲染。在開發vue專案的時候,有一部分部分元件是沒必要多次渲染的 keep alive屬性 include 字串或正規表示式。只有匹配的元件會被快取。exclude 字串或正規表示式。任何匹配的元件都不會被快取。用法 快取動態...
keep alive的使用及詳解
keep alive 是 vue 的內建元件,當它包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 transition 相似,keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素,也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中,防止重複渲染dom,減少載...
keep alive的原理及使用
內建元件keep alive 主要用於保留元件狀態或避免重新渲染。keep alive生命週期鉤子函式 activated deactivated,每次進入離開過程都呼叫一次 comp1 頁面跳轉至 home頁面,home頁面不重新整理 comp2 頁面跳轉至 home頁面,home頁面重新整理 配...