keep alive的使用及詳解

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

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

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

2. deactivated

>
>
<
/keep-alive>
<
/div>
<
/template>
export
default
<
/script>

>
// 1. 將快取 name 為 test 的元件
'test'
>
>
<
/keep-alive>
// 2. 將快取 name 為 a 或者 b 的元件，結合動態元件使用
'a,b'
>
>
<
/keep-alive>
// 3. 使用正規表示式，需使用 v-bind
'/a|b/'
>
>
<
/keep-alive>
// 5.動態判斷
'includedcomponents'
>
>
<
/keep-alive>
// 5. 將不快取 name 為 test 的元件
'test'
>
>
<
/keep-alive>
<
/div>
<
/template>
export
default
<
/script>

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
newrouter(}
,},}
]}]}
)

>
"$route.meta.keepalive"
>
<
/router-view>
<
/keep-alive>
"!$route.meta.keepalive"
>
<
/router-view>
<
/div>
<
/template>
export
default
<
/script>

vue中keep alive的使用及詳解

keep alive 是 vue 的內建元件，當它包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 transition 相似，keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素，也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中，防止重複渲染dom，減少載...

vue中keep alive的使用及詳解

keep alive 是 vue 的內建元件，當它包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 transition 相似，keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素，也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中，防止重複渲染dom，減少載...

keep alive的原理及使用

內建元件keep alive 主要用於保留元件狀態或避免重新渲染。keep alive生命週期鉤子函式 activated deactivated，每次進入離開過程都呼叫一次 comp1 頁面跳轉至 home頁面，home頁面不重新整理 comp2 頁面跳轉至 home頁面，home頁面重新整理 配...