詳解關(guān)于Vue2.0路由開啟keep-alive時(shí)需要注意的地方
Vue2.0 做應(yīng)用必有的需求就是頁面數(shù)據(jù)需要做緩存，不用每次進(jìn)入頁面都要把數(shù)據(jù)重新請求一遍，每次頁面切換都有段等待數(shù)據(jù)相應(yīng)時(shí)間，這個(gè)用戶體驗(yàn)可想有多么難受，所以頁面緩存是必要的，啥時(shí)候需要更新頁面數(shù)據(jù)呢？可以監(jiān)聽狀態(tài)變化，或者是手動下拉刷新重新請求數(shù)據(jù)，醬紫，我想用戶體驗(yàn)會做的更好。
keep-alive的作用以及好處
在做電商有關(guān)的項(xiàng)目中，當(dāng)我們第一次進(jìn)入列表頁需要請求一下數(shù)據(jù)，當(dāng)我從列表頁進(jìn)入詳情頁，詳情頁不緩存也需要請求下數(shù)據(jù)，然后返回列表頁，這時(shí)候我們使用keep-alive來緩存組件，防止二次渲染，這樣會大大的節(jié)省性能。
廢話不多說直接上碼，一般是在 src/App.vue 設(shè)置開啟 keep-alive 實(shí)現(xiàn)頁面數(shù)據(jù)緩存：
<template> <keep-alive> <router-view></router-view> </keep-alive> </template>
列舉幾個(gè)常用的 hook 方法，如下：
export default {
data() {
return {
}
},
created: function() {
console.log("the hook of created is done!");
},
mounted: function() {
console.log("the hook of mounted is done!");
},
activated: function() {
console.log("the hook of activated is done!");
},
deactivated: function() {
console.log("the hook of deactivated is done!");
}
}首次進(jìn)來 hook 的觸發(fā)順序 created-> mounted-> activated，退出時(shí)觸發(fā) deactivated：
// 控制臺打印結(jié)果
the hook of created is done!
the hook of mounted is done!
the hook of activated is done!
the hook of deactivated is done!
二次進(jìn)來 hook 只觸發(fā) activated，退出時(shí)觸發(fā) deactivated：
// 控制臺打印結(jié)果
the hook of activated is done!
the hook of deactivated is done!
所以這就是為什么有些人開啟 keep-alive 之后，created 和 mounted 注冊的 pageInt 方法不觸發(fā)的原因了，因?yàn)?keep-alive 把它們屏蔽了，也就是把數(shù)據(jù)緩存起來，所以不再請求。
如果你的某些頁面一定要實(shí)時(shí)請求，你可以直接在 activated 這個(gè) hook 做 pageInt，就不要在 created 和 mounted 上面注冊 pageInt 方法了。
還有你可以選擇性 pageInt，比如監(jiān)聽狀態(tài)變化，包括但不限于監(jiān)聽路由的變化，某參數(shù)的變化，某時(shí)間節(jié)點(diǎn)的變化等等。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- 解決vue keep-alive 數(shù)據(jù)更新的問題
- vue2使用keep-alive緩存多層列表頁的方法
- 基于vue中keep-alive緩存問題的解決方法
- Vue中 key keep-alive的實(shí)現(xiàn)原理
- vue解決使用webpack打包后keep-alive不生效的方法
- vue 中的keep-alive實(shí)例代碼
- vue.js內(nèi)置組件之keep-alive組件使用
- vue keep-alive請求數(shù)據(jù)的方法示例
- vue中keep-alive的用法及問題描述
- vue中進(jìn)入詳情頁記住滾動位置的方法(keep-alive)
相關(guān)文章
跨域是指當(dāng)一個(gè)資源去訪問另一個(gè)不同域名或者同域名不同端口的資源時(shí),就會發(fā)出跨域請求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩
這篇文章主要介紹了如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue 源碼分析之 Observer實(shí)現(xiàn)過程
這篇文章主要介紹了 Vue 源碼分析之 Observer實(shí)現(xiàn)過程，Observer 最主要的作用就是實(shí)現(xiàn)了touch -Data(getter) - Collect as Dependency這段過程，也就是依賴收集的過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
這篇文章主要介紹了Vue常用的全選/反選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue項(xiàng)目使用微信公眾號支付總結(jié)及遇到的坑
這篇文章主要介紹了vue項(xiàng)目使用微信公眾號支付總結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-11-11
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實(shí)現(xiàn)
這篇文章主要介紹了實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03