vue使用keep alive優化網頁效能

2021-10-03 23:19:47 字數 629 閱讀 4451

>

>

<

/keep-alive>

<

/div>

<

/template>

加上keep-alive標籤,意思是:路由中的內容被載入過一次後,就將路由中的內容放到記憶體之中,下一次就不需要重新渲染這個元件。

但首頁根據選擇的城市顯示資料,所以在傳送請求是改為

computed:

,methods:

,}

想要首頁內容跟著改變,可以使用activated這個生命週期函式,所以在這個函式中進行判斷,判斷這次城市和上一次城市是否相同,如果不同,則重新傳送ajax請求。

mounted()

,activated()

},

或者在keep-alive中加上一下內容

"detail"

>

>

<

/keep-alive>

detail為元件名字

vue使用keep alive快取元件

在這裡keep alive配合了router view使用,keep alive本身是vue2.0的功能,並不是vue router的,所以在vue1.0版本是不支援的。在vue路由中使用meta配合實現效果 在router檔案加上meta判斷 import vue from vue import ...

vue中keep alive的使用

1.beforecreate 2.created 3.beforemount 4.mounted 5.beforeupdate 6.updated 7.beforedestory 8.destroyed 9.errorcaptured 當捕獲乙個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數 錯誤...

vue中keep alive的使用

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