內建元件keep-alive
主要用於保留元件狀態或避免重新渲染。
keep-alive生命週期鉤子函式：activated、deactivated，每次進入離開過程都呼叫一次
comp1 頁面跳轉至 home頁面， home頁面不重新整理
comp2 頁面跳轉至 home頁面， home頁面重新整理
//配置路由 router/index.js
import vue from
'vue'
import router from
'vue-router'
import helloworld from
'@/components/helloworld'
import comp1 from
'@/pages/comp1'
import comp2 from
'@/pages/comp2'
vue.
use(router)
const router =
newrouter(}
,,]}
)export
default router
>
"/">home<
/router-link>
"/comp1"
>comp1<
/router-link>
"/comp2"
>comp2<
/router-link>
"$route.meta.keepalive"
>
<
!-- 此處會展示被快取元件 --
>
<
/router-view>
<
/keep-alive>
"!$route.meta.keepalive"
>
<
/router-view>
<
!-- 此處重新渲染的元件 --
>
<
/div>
<
/template>
export
default
<
/script>
"fn"
>加加加<
/button>
}<
/p>
<
/div>
<
/template>
export
default},
methods:},
//keep-alive生命週期鉤子函式：activated、deactivated
activated()
,deactivated()
}<
/script>
="hello"
>
comp1,comp1,comp1<
/p>
<
/div>
<
/template>
export
default
}<
/script>
comp2,comp2,comp2<
/p>
<
/div>
<
/template>
export
default
}<
/script>
keep alive的使用及詳解
keep alive 是 vue 的內建元件，當它包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 transition 相似，keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素，也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中，防止重複渲染dom，減少載...
keep alive的使用及注意點
以vue提供了乙個內建元件keep alive來快取元件內部狀態，避免重新渲染。在開發vue專案的時候，有一部分部分元件是沒必要多次渲染的 keep alive屬性 include 字串或正規表示式。只有匹配的元件會被快取。exclude 字串或正規表示式。任何匹配的元件都不會被快取。用法 快取動態...
keep alive的使用及注意點
以vue提供了乙個內建元件keep alive來快取元件內部狀態，避免重新渲染。在開發vue專案的時候，有一部分部分元件是沒必要多次渲染的 keep alive屬性 include 字串或正規表示式。只有匹配的元件會被快取。exclude 字串或正規表示式。任何匹配的元件都不會被快取。用法 快取動態...