vue中keep-alive的表達(dá)方式

Js是如今最流行的代碼編程語(yǔ)言，vue作為一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，重要程度可見一斑。Keep-alive是Vue的重要組件，在Vue中扮演不可替代的角色。

keep-alive是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級(jí)大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該組件是否緩存取決于include和exclude屬性 -->
  </component>
</keep-alive>

參數(shù)解釋
include - 字符串或正則表達(dá)式，只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式，任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 。

<!-- 逗號(hào)分隔字符串，只有組件a與b被緩存。 -->
<keep-alive include="a,b">
  <component></component></keep-alive>
<!-- 正則表達(dá)式 (需要使用 v-bind，符合匹配規(guī)則的都會(huì)被緩存) -->
<keep-alive :include="/a|b/">
  <component></component></keep-alive>
<!-- Array (需要使用 v-bind，被包含的都會(huì)被緩存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

上述內(nèi)容即是keep-alive在Vue中的作用及表達(dá)方式。通過(guò)keep-alive可以達(dá)到組件保留或避免重新渲染的效果，更大程度上優(yōu)化了Js代碼。

猜你喜歡：

Vue.js框架是什么，為什么選擇它?

低學(xué)歷能夠?qū)W會(huì)Java嗎？