溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue的keep-alive用法技巧

發布時間:2020-10-03 05:45:15 來源:腳本之家 閱讀:192 作者:尋易之客 欄目:web開發

<keep-alive>是Vue的內置組件,能在組件切換過程中將狀態保留在內存中,防止重復渲染DOM

<keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive>是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。

方法1

include: 字符串或正則表達式。只有匹配的組件會被緩存。

exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

exclude優先級大于include

<keep-alive include="a,b">
 <!-- 將緩存name為a或者b的組件,結合動態組件使用 -->
 <component :is="view"></component>
</keep-alive>

方法2  (結合berforeRouteEnter,緩存部分頁面)

vue的keep-alive用法技巧

vue的keep-alive用法技巧 

vue的keep-alive用法技巧

緩存的頁面 created 會執行只有一次,activated每次都會執行 , created 里面做 第一次 isFirstEnter = true(由于頁面被緩存,所以一直生效),之后再activated 里面做判斷 只有 “不是返回回來的” 和 “第一次進來的” 就刷新數據, 并且要在下面 都設為false, 以免緩存各標識不對,在進入 “列表頁” 時,通過router鉤子函數 beforeRouteEnter做判斷,詳情頁過來的設 isBack 為true,即不刷新頁面

以上就是全部相關知識點內容,感謝大家對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女