這篇文章主要為大家展示了“Vue2.0路由開啟keep-alive時需要注意的地方有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue2.0路由開啟keep-alive時需要注意的地方有哪些”這篇文章吧。

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信平臺小程序開發(fā)、公眾號商城、等建站開發(fā)，成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

Vue2.0 做應(yīng)用必有的需求就是頁面數(shù)據(jù)需要做緩存，不用每次進(jìn)入頁面都要把數(shù)據(jù)重新請求一遍，每次頁面切換都有段等待數(shù)據(jù)相應(yīng)時間，這個用戶體驗(yàn)可想有多么蛋疼，所以頁面緩存是必要的，啥時候需要更新頁面數(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ù)，然后返回列表頁，這時候我們使用keep-alive來緩存組件，防止二次渲染，這樣會大大的節(jié)省性能。

廢話不多說直接上碼，一般是在 src/App.vue 設(shè)置開啟 keep-alive 實(shí)現(xiàn)頁面數(shù)據(jù)緩存：

<template>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
</template>

列舉幾個常用的 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，退出時觸發(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，退出時觸發(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í)時請求，你可以直接在 activated 這個 hook 做 pageInt，就不要在 created 和 mounted 上面注冊 pageInt 方法了。

還有你可以選擇性 pageInt，比如監(jiān)聽狀態(tài)變化，包括但不限于監(jiān)聽路由的變化，某參數(shù)的變化，某時間節(jié)點(diǎn)的變化等等。

以上是“Vue2.0路由開啟keep-alive時需要注意的地方有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：Vue2.0路由開啟keep-alive時需要注意的地方有哪些-創(chuàng)新互聯(lián)
文章起源：http://aaarwkj.com/article46/isehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站制作、企業(yè)建站、網(wǎng)站內(nèi)鏈、電子商務(wù)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)