首頁技術(shù)文章正文

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

更新時(shí)間:2020-09-08 來源:黑馬程序員 瀏覽量:

Js是如今最流行的代碼編程語言,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á)方式。通過keep-alive可以達(dá)到組件保留或避免重新渲染的效果,更大程度上優(yōu)化了Js代碼。

 

猜你喜歡:

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

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

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!