中文字幕在线中文乱码不卡24_国产在线网站_国产精品扒开腿做爽爽爽的事情_亚洲男人A∨资源网

      <dfn id="x8ma1"><var id="x8ma1"></var></dfn>

    1. <object id="x8ma1"><strike id="x8ma1"><th id="x8ma1"></th></strike></object>
    2. <address id="x8ma1"></address><bdo id="x8ma1"></bdo>
    3. <dfn id="x8ma1"><var id="x8ma1"><ruby id="x8ma1"></ruby></var></dfn>

          資訊財(cái)經(jīng)娛樂科技汽車時(shí)尚企業(yè)游戲商訊消費(fèi)購物微商

          利用Vue中keep-alive,快速實(shí)現(xiàn)頁面緩存

          2020-03-21 06:01:48 來源: 閱讀:-

          keep-alive

          有時(shí)候我們不希望組件被重新渲染影響使用體驗(yàn);或者處于性能考慮,避免多次重復(fù)渲染降低性能。而是希望組件可以緩存下來,維持當(dāng)前的狀態(tài)。這時(shí)候就可以用到keep-alive組件。

          官網(wǎng)解釋:&lt;keep-alive&gt; 包裹動態(tài)組件時(shí),會緩存不活動的組件實(shí)例,而不是銷毀它們。和 &lt;transition&gt; 相似,&lt;keep-alive&gt; 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現(xiàn)在父組件鏈中。 當(dāng)組件在 &lt;keep-alive&gt; 內(nèi)被切換,它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。 在 2.2.0 及其更高版本中,activated 和 deactivated 將會在 &lt;keep-alive&gt; 樹內(nèi)的所有嵌套組件中觸發(fā)。 主要用于保留組件狀態(tài)或避免重新渲染

          應(yīng)用場景

          如果未使用keep-alive組件,則在頁面回退時(shí)仍然會重新渲染頁面,觸發(fā)created鉤子,使用體驗(yàn)不好。 在以下場景中使用keep-alive組件會顯著提高用戶體驗(yàn),菜單存在多級關(guān)系,多見于列表頁+詳情頁的場景如:

          • 商品列表頁點(diǎn)擊商品跳轉(zhuǎn)到商品詳情,返回后仍顯示原有信息
          • 訂單列表跳轉(zhuǎn)到訂單詳情,返回,等等場景。

          keep-alive的生命周期

          • 初次進(jìn)入時(shí):created &gt; mounted &gt; activated;退出后觸發(fā) deactivated
          • 再次進(jìn)入:會觸發(fā) activated;事件掛載的方法等,只執(zhí)行一次的放在 mounted 中;組件每次進(jìn)去執(zhí)行的方法放在 activated 中

          項(xiàng)目實(shí)踐

          1.更改App.vue

          &lt;div id=&#34;app&#34; class=&#39;wrapper&#39;&gt;

          &lt;keep-alive&gt;

          &lt;!-- 需要緩存的視圖組件 --&gt;

          &lt;router-view v-if=&#34;$route.meta.keepAlive&#34;&gt;&lt;/router-view&gt;

          &lt;/keep-alive&gt;

          &lt;!-- 不需要緩存的視圖組件 --&gt;

          &lt;router-view v-if=&#34;!$route.meta.keepAlive&#34;&gt;&lt;/router-view&gt;

          &lt;/div&gt;

          2.在路由中設(shè)置keepAlive

          {

          path: &#39;list&#39;,

          name: &#39;itemList&#39;, // 商品管理

          component (resolve) {

          require([&#39;@/pages/item/list&#39;], resolve)

          },

          meta: {

          keepAlive: true,

          title: &#39;商品管理&#39;

          }

          }

          3.更改 beforeEach鉤子

          這一步是為了清空無用的頁面緩存。 假設(shè)現(xiàn)在A、B兩個頁面都開啟的緩存:

          • 若第一次進(jìn)入A頁面后退出,再次進(jìn)入頁面時(shí),頁面不會刷新。這和目前的業(yè)務(wù)邏輯不符。我們想要的結(jié)果是A頁面前進(jìn)后返回,頁面保持不變,而不是退出后重新進(jìn)入保持不變。
          • 在進(jìn)入過A頁面后進(jìn)入B頁面,經(jīng)過測試后發(fā)現(xiàn),B頁面竟然會顯示A頁面的緩存,盡管url已經(jīng)改變

          為了解決這個問題,需要判斷頁面是在前進(jìn)還是后退。 在beforeEach鉤子添加代碼:

          let toDepth = to.path.split(&#39;/&#39;).length

          let fromDepth = from.path.split(&#39;/&#39;).length

          if (toDepth &lt; fromDepth) {

          console.log(&#39;back...&#39;)

          from.meta.keepAlive = false

          to.meta.keepAlive = true

          }

          記錄頁面滾動位置

          keep-alive并不會記錄頁面的滾動位置,所以我們在跳轉(zhuǎn)時(shí)需要記錄當(dāng)前的滾動位置,在觸發(fā)activated鉤子時(shí)重新定位到原有位置。 具體設(shè)計(jì)思路:

          1. 在deactivated鉤子中記錄當(dāng)前滾動位置,使用localStorage:

          deactivated () {

          window.localStorage.setItem(this.key, JSON.stringify({

          listScrollTop: this.scrollTop

          }))

          }

          1. 在activated鉤子中滾動:

          this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null

          $(&#39;.sidebar-item&#39;).scrollTop(this.cacheData.listScrollTop)


          歡迎在下方留言討論,小郭將與你一起成長,想看更多內(nèi)容可關(guān)注同名公眾號“一郭鮮”

          推薦閱讀:淅川縣偶涵山電器營業(yè)中心

          查看心情排行你看到此篇文章的感受是:


          • 支持

          • 高興

          • 震驚

          • 憤怒

          • 無聊

          • 無奈

          • 謊言

          • 槍稿

          • 不解

          • 標(biāo)題黨
          要聞排行
          精彩推薦