1. <s id="zaq5z"></s>
  • <s id="zaq5z"><dfn id="zaq5z"></dfn></s>
    <s id="zaq5z"><dfn id="zaq5z"><noscript id="zaq5z"></noscript></dfn></s><span id="zaq5z"></span>
    <span id="zaq5z"></span>

    利用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
    本文系转载,版权归原作者所有;旨在传递信息,不代表长沙在线的观点和立场。

    相关热点

    91麻豆精品国产91久久久久久,Av有声小说亚洲一区二区三区,亚洲自偷自拍另类11p,视频二区 素人 制服 国产,人妻絲袜中出乐派影院,潘甜甜麻豆,卢珊珊果冻传媒 仲巴县| 汉中市| 屯昌县| 连山| 江津市| 余干县| 库伦旗| 谢通门县| 大田县| 积石山| 邵武市| 手机| 惠水县| 江都市| 舒兰市| 福泉市| 磐安县| 堆龙德庆县| 买车| 临泉县| 工布江达县| 罗山县| 漳州市| 子洲县| 镇赉县| 汶川县| 芜湖市| 贵阳市| 饶阳县| 日照市| 崇文区| 蚌埠市| 恩施市| 申扎县| 玉田县| 庆元县| 赤壁市| 宜兰县| 和林格尔县| 新干县| 汨罗市| http://444 http://444 http://444 http://444 http://444 http://444