<s id="gfgra"><dfn id="gfgra"></dfn></s>
      <span id="gfgra"></span>

        <s id="gfgra"></s>

    1. <s id="gfgra"><dfn id="gfgra"><i id="gfgra"></i></dfn></s>
    2. 利用Vue中keep-alive,快速实现页面缓存

      来源:互联网   阅读:-

      时尚
      2020
      03/23
      10:11

      keep-alive

      有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

      官网解释:&lt;keep-alive&gt; 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 &lt;transition&gt; 相似,&lt;keep-alive&gt; 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 &lt;keep-alive&gt; 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 &lt;keep-alive&gt; 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

      应用场景

      如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:

      • 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
      • 订单列表跳转到订单详情,返回,等等场景。

      keep-alive的生命周期

      • 初次进入时:created &gt; mounted &gt; activated;退出后触发 deactivated
      • 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中

      项目实践

      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.在路由中设置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钩子

      这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存:

      • 若第一次进入A页面后退出,再次进入页面时,页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回,页面保持不变,而不是退出后重新进入保持不变。
      • 在进入过A页面后进入B页面,经过测试后发现,B页面竟然会显示A页面的缓存,尽管url已经改变

      为了解决这个问题,需要判断页面是在前进还是后退。 在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并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated钩子时重新定位到原有位置。 具体设计思路:

      1. 在deactivated钩子中记录当前滚动位置,使用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)


      欢迎在下方留言讨论,小郭将与你一起成长,想看更多内容可关注同名公众号“一郭鲜”

      推荐阅读:苹果7p是什么时候上市的

       

      THE END
      本文系转载,版权归原作者所有;旨在传递信息,不代表长沙在线的观点和立场。

      相关热点

      影音先锋另类重口在线播放,射精视频a片,看中国农村妇女黄色电影院,国产极品白嫩超清magnet,pr社婚纱,国产AV麻豆制片杨思敏www.hcxns.org 卓资县| 昌黎县| 莫力| 邮箱| 板桥市| 周至县| 马尔康县| 南华县| 无棣县| 襄樊市| 洮南市| 嵊州市| 昌平区| 镇远县| 滁州市| 修文县| 博兴县| 清徐县| 海南省| 阿拉善右旗| 巴马| 梁山县| 辽阳县| 双桥区| 左云县| 电白县| 塘沽区| 苍山县| 日喀则市| 汤原县| 广宁县| 临潭县| 鹤山市| 定西市| 凌海市| 莱州市| 长宁县| 永康市| 西峡县| 富民县| 阿克苏市| http://444 http://444 http://444 http://444 http://444 http://444