Vue 內置組件keep-alive的使用示例

keep-alive 是Vue內置的組件之一， 主要用于保留組件狀態或避免重新渲染。

作用

   在組件切換過程中將狀態保留在內存中，防止重復渲染DOM，減少加載時間及性能消耗，提高用戶體驗。

< keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 < transition> 相似，< keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。

當組件在 < keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。

Props：

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。 exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。 max - 數字。最多可以緩存多少組件實例。

如果你只想緩存部分組件的狀態，可以使用include屬性。

如果你想除掉一些組件，其他的才被緩存，可以使用exlucde屬性。

最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

<keep-alive :max='10'> <component :is='view'></component></keep-alive>使用示例：1.緩存所有頁面：

<keep-alive> <router-view></router-view> <!--這里是會被緩存的組件--></keep-alive>2.根據條件緩存部分頁面

(更多用法見官網API)

<template> <div id='app'> // 1. 將緩存 name 為 newsList 或者 productList 的組件 <keep-alive include=’newsList,productList’> <router-view/> </keep-alive>// 2. 將不緩存 name 為 test 的組件<keep-alive exclude=’test’> <router-view/></keep-alive> </div></template><script>export default { name: ’App’}</script>

注意：

還有一步，你必須在需要被緩存狀態的組件的script部分，給組件添加一個name屬性。 如果沒有使用keep-alive緩存狀態的組件，可以不寫name屬性。但是如果使用了keep-alive緩存該組件狀態，則此組件必須有這個屬性。并且，這個屬性的值，還必須跟標簽中include屬性的值完全一致，包括大小寫。 以productList.vue組件為例　

<template> <!-- 這里是productList組件的html結構部分 --></template><script>export default { name: 'productList', //如果使用了keep-alive緩存該組件狀態，則此組件必須有這個屬性。 data(){return {} }</script>3.結合vue-router，緩存部分頁面

export default new Router({ mode: ’history’, routes: [ { path: ’/’, name: ’home’, component: Home, children: [{ path: ’products’, name: ’products’, component: products, meta: {keepAlive: true // 需要緩存}},{ path: ’newsDetails’, name: ’newsDetails’, component: newsDetails, meta: {keepAlive: false // 不需要緩存}} ] } ]})

在 App.vue 里面

<template> <div id='app'> <keep-alive> <router-view v-if='$route.meta.keepAlive'></router-view> </keep-alive> <router-view v-if='!$route.meta.keepAlive'></router-view> </div></template><script>export default { name: ’App’}</script>二、keep-alive 生命周期

包含在 keep-alive 中創建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated。

      在 keep-alive 組件激活時調用。

在組件第一次渲染時會被調用，之后在每次緩存組件被激活時調用。

第一次進入緩存路由/組件，在mounted后面，beforeRouteEnter守衛傳給 next 的回調函數之前調用：

頁面第一次進入的時候，鉤子觸發的順序是created->mounted->activated

因為組件被緩存了，再次進入緩存路由/組件時，不會觸發這些鉤子：

beforeCreate created beforeMount mounted 都不會觸發。

      在 keep-alive 組件停用(離開路由)時調用。       

使用了keep-alive就不會調用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因為組件沒被銷毀，被緩存起來了。

這個鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時候做一些事情，你可以放在這個鉤子里。

  注意：

1、 使用 keep-alive 會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在 activated 階段獲取數據，承擔原來created鉤子函數中獲取數據的任務。

2、只有組件被 keep-alive 包裹時，這兩個生命周期函數才會被調用，如果作為正常組件使用，是不會被調用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子函數依然不會被調用！

3、以上這兩個鉤子函數在服務器端渲染期間不被調用。

參考官方文檔：cn.vuejs.org/v2/api/#kee…

以上就是Vue 內置組件keep-alive的使用示例的詳細內容，更多關于Vue 內置組件keep-alive的資料請關注好吧啦網其它相關文章！