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

Js語言解析：vue語言中的keep-alive

更新時(shí)間:2020年09月08日17時(shí)06分來源:傳智播客瀏覽次數(shù):

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)先級大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    
  component>
keep-alive>

參數(shù)解釋

include - 字符串或正則表達(dá)式，只有名稱匹配的組件會(huì)被緩存

exclude - 字符串或正則表達(dá)式，任何名稱匹配的組件都不會(huì)被緩存

include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 。

<keep-alive include="a,b">
  <component>component>keep-alive>
<keep-alive :include="/a|b/">
  
 :include="['a', 'b']">

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

猜你喜歡：

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

最新資訊