這篇文章主要為大家展示了“Vue2.0路由開啟keep-alive時(shí)需要注意的地方有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue2.0路由開啟keep-alive時(shí)需要注意的地方有哪些”這篇文章吧。
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、尼元陽(yáng)ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的尼元陽(yáng)網(wǎng)站制作公司
Vue2.0 做應(yīng)用必有的需求就是頁(yè)面數(shù)據(jù)需要做緩存，不用每次進(jìn)入頁(yè)面都要把數(shù)據(jù)重新請(qǐng)求一遍，每次頁(yè)面切換都有段等待數(shù)據(jù)相應(yīng)時(shí)間，這個(gè)用戶體驗(yàn)可想有多么蛋疼，所以頁(yè)面緩存是必要的，啥時(shí)候需要更新頁(yè)面數(shù)據(jù)呢？可以監(jiān)聽狀態(tài)變化，或者是手動(dòng)下拉刷新重新請(qǐng)求數(shù)據(jù)，醬紫，我想用戶體驗(yàn)會(huì)做的更好。
keep-alive的作用以及好處
在做電商有關(guān)的項(xiàng)目中，當(dāng)我們第一次進(jìn)入列表頁(yè)需要請(qǐng)求一下數(shù)據(jù)，當(dāng)我從列表頁(yè)進(jìn)入詳情頁(yè)，詳情頁(yè)不緩存也需要請(qǐng)求下數(shù)據(jù)，然后返回列表頁(yè)，這時(shí)候我們使用keep-alive來(lái)緩存組件，防止二次渲染，這樣會(huì)大大的節(jié)省性能。
廢話不多說(shuō)直接上碼，一般是在 src/App.vue 設(shè)置開啟 keep-alive 實(shí)現(xiàn)頁(yè)面數(shù)據(jù)緩存：
列舉幾個(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)來(lái) hook 的觸發(fā)順序 created-> mounted-> activated，退出時(shí)觸發(fā) deactivated：
// 控制臺(tái)打印結(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)來(lái) hook 只觸發(fā) activated，退出時(shí)觸發(fā) deactivated：
// 控制臺(tái)打印結(jié)果
the hook of activated is done!
the hook of deactivated is done!
所以這就是為什么有些人開啟 keep-alive 之后，created 和 mounted 注冊(cè)的 pageInt 方法不觸發(fā)的原因了，因?yàn)?keep-alive 把它們屏蔽了，也就是把數(shù)據(jù)緩存起來(lái)，所以不再請(qǐng)求。
如果你的某些頁(yè)面一定要實(shí)時(shí)請(qǐng)求，你可以直接在 activated 這個(gè) hook 做 pageInt，就不要在 created 和 mounted 上面注冊(cè) pageInt 方法了。
還有你可以選擇性 pageInt，比如監(jiān)聽狀態(tài)變化，包括但不限于監(jiān)聽路由的變化，某參數(shù)的變化，某時(shí)間節(jié)點(diǎn)的變化等等。
以上是“Vue2.0路由開啟keep-alive時(shí)需要注意的地方有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
