vue中keep alive的使用

keep-alive 是 vue 的內建元件，當它包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 transition 相似，keep-alive 是乙個抽象元件：它自身不會渲染成乙個 dom 元素，也不會出現在父元件鏈中。

在元件切換過程中將狀態保留在記憶體中，防止重複渲染dom，減少載入時間及效能消耗，提高使用者體驗性

在 created 函式呼叫時將需要快取的 vnode 節點儲存在 this.cache 中／在 render（頁面渲染）時，如果 vnode 的 name 符合快取條件（可以用 include 以及 exclude 控制），則會從 this.cache 中取出之前快取的 vnode 例項進行渲染。

vnode：虛擬dom，其實就是乙個js物件

1. activated

在 keep-alive 元件啟用時呼叫

該鉤子函式在伺服器端渲染期間不被呼叫

2. deactivated

在 keep-alive 元件停用時呼叫

該鉤子在伺服器端渲染期間不被呼叫

被包含在 keep-alive 中建立的元件，會多出兩個生命週期的鉤子: activated 與 deactivated

使用 keep-alive 會將資料保留在記憶體中，如果要在每次進入頁面的時候獲取最新的資料，需要在 activated 階段獲取資料，承擔原來 created 鉤子函式中獲取資料的任務。

注意：只有元件被 keep-alive 包裹時，這兩個生命週期函式才會被呼叫，如果作為正常元件使用，是不會被呼叫的，以及在 2.1.0 版本之後，使用 exclude 排除之後，就算被包裹在 keep-alive 中，這兩個鉤子函式依然不會被呼叫！另外，在服務端渲染時，此鉤子函式也不會被呼叫。

// 2. 將快取 name 為 a 或者 b 的元件，結合動態元件使用

// 3. 使用正規表示式，需使用 v-bind

// 5.動態判斷

// 5. 將不快取 name 為 test 的元件

import vue from 'vue'
import router from 'vue-router'
const home = resolve => require(['@/components/home/home'], resolve)
const goods = resolve => require(['@/components/home/goods'], resolve)
const ratings = resolve => require(['@/components/home/ratings'], resolve)
const seller = resolve => require(['@/components/home/seller'], resolve)
vue.use(router)
export default new router(
},},}]
}]})

vue中keep alive的使用

vue中keep alive的使用

vue中 keep alive 元件的作用

vue中keep alive的使用及詳解

vue中keep alive的使用

vue中keep alive的使用

vue中 keep alive 元件的作用

vue中keep alive的使用及詳解

相關推薦