精华内容
参与话题
问答
  • If you've used Vue, you know that it has a very good component (keep-alive) that keeps the state of the component to avoid repeated re-rendering. Sometimes, we want the list page to cache the page ...
  • Or it looks like keep-alive doesnt work. <pre><code> CountTimeouts 31539 count Oct 19, 2016 10:11:09 AM Oct 19, 2016 4:25:32 PM -- Number of keep-alive connections that timed out MaxRequests 250 ...
  • 5.2.1(D) keep-alive2问题

    2020-11-22 12:03:51
    提示[keep-alive2] keep-alive2 loop was in daemon,并处于重连与断线循环状态 <pre><code> server = '119.39.176.194' username='***' password='***' ...
  • Expand keep-alive support

    2020-11-27 02:33:06
    <div><p>SIP.js recognizes <a href="https://github.com/onsip/SIP.js/blob/608407e6153e7a65c5c48c2f140fb4a943e4b5d6/src/Transport.js#L202">keep-alive responses</a>. What do you think about enabling keep-...
  • Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化。现在有需求切换回来...
  • DEBUG ssh: Sending SSH keep-alive... DEBUG ssh: Sending SSH keep-alive... DEBUG ssh: Sending SSH keep-alive... DEBUG ssh: Sending SSH keep-alive... DEBUG ssh: Sending SSH keep-alive... DEBUG ssh: ...
  • Strange with keep-alive

    2020-12-01 17:07:20
    <p>And i dont may reproduce right now - but i see one time, then i send long value (around 1024 bytes) without keep-alive from curl it dont work <p>Example request: <pre><code> curl -v -H "...
  • Keep-alive in TheHive

    2020-11-29 16:38:43
    <p>Another recommendation given by AWS is to implement a keep-alive on the application. I looked around and I'm not sure this is supported by TheHive. I'm not sure this can be done at the OS-...
  • <div><p>It looks to me as if the chunked encoding in combination with keep-alive is broken using reactor-netty 0.7.3. <p>If this is not a reactor-netty issue but spring or spring boot, please let me ...
  • この pull request では Keep-Alive を無効にするオプション (必要なら Keep-Alive workaround を無効にしてテストできるように) を追加した上で、これが追加されているときに Keep-Alive を可能な限り無効にしよう...
  • keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其包裹组件的渲染 二、keep-alive介绍与应用 2.1 keep-alive是什么 keep-alive是一个抽象组件:它...
  • keep-alive

    2020-09-28 10:51:20
    keep-alive是什么 使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它自身不会渲染一个DOM元素,也不会出现在父组件链中 keep-alive的使用场景 用户在某个列表页面选择筛选条件过滤出一...

    keep-alive是什么

    使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它自身不会渲染一个DOM元素,也不会出现在父组件链中

    keep-alive的使用场景

    用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。
    keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态

    keep-alive 使用语法

    1、利用include、exclude属性

    <keep-alive include="bookLists,bookLists">
          <router-view></router-view>
    </keep-alive>
    <keep-alive exclude="indexLists">
          <router-view></router-view>
    </keep-alive>
    

    include属性表示只有name属性为bookLists,bookLists的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存。exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存

    2、利用meta属性

    router.js文件:

        export default[
     {
      path:'/',
      name:'home',
      components:Home,
      meta:{
        keepAlive:true //需要被缓存的组件
     },
     {
      path:'/book',
      name:'book',
      components:Book,
      meta:{
         keepAlive:false //不需要被缓存的组件
     } 
    ]
    
    <keep-alive>
      <router-view v-if="this.$route.meat.keepAlive"></router-view>
      <!--这里是会被缓存的组件-->
    </keep-alive>
    <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
    <!--这里是不会被缓存的组件-->
    
    展开全文
  • <p>If you use a reverse proxy, and that proxy uses keep-alive to reduce latency to the upstream, then this will cause manners to block until those keep-alive sockets are closed. <p>I noticed this when...
  • Keep-alive

    2020-07-22 20:19:04
    keep-alive是什么? keep-alive是vue提供给我们的一个组件,用来在路由切换的时候保存我们的组件状态. 二. 什么时候用? 当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置,然后...

    一. keep-alive是什么?
    keep-alive是vue提供给我们的一个组件,用来在路由切换的时候保存我们的组件状态.

    二. 什么时候用?
    当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置,然后又去购物车页面,再回到首页的时候能够保存住我刚才滑动的位置。

    三. 怎么用?
    1、保存所有路由的状态
    <router-view></router-view><keep-alive></keep-alive>包裹起来

    2、保存部分组件的状态
    方法一:
    ​ 1、在配置路由的时候需要给路由添加meta属性,用keepAlive标示是否被缓存

    export default new Router({
      routes: [
        {
          path: '/home',
          name: 'Home',
          component: Home,
          meta:{
          	keepAlive:true
          }
        },
         {
          path: '/cart',
          name: 'Cart',
          component: Cart,
          meta:{
          	keepAlive:false
          }
        },
         {
          path: '/my',
          name: 'My',
          component:My,
          meta:{
          	keepAlive:false
          }
        },
         {
          path: '/',
          redirect:'/home'
        }
      ]
    })
    

    2、判断router-view是否被包裹

     <section>
            <keep-alive>
              <router-view v-if="this.$route.meta.keepAlive"></router-view>
            </keep-alive>
              <router-view v-if="!this.$route.meta.keepAlive"></router-view>
        </section>
    

    方法二:

    使用keep-alive的include属性 include后面根的是组件的名字

    <keep-alive include="Home">
              <router-view></router-view>
    </keep-alive>
    
    展开全文
  • keep-alive简介 1.什么是keep-alive keep-alive是vue2.0新增的内置组件,可以用来缓存上个页面的数据,在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就...

    keep-alive简介

    1.什么是keep-alive
    keep-alive是vue2.0新增的内置组件,可以用来缓存上个页面的数据,在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态

    2.keep-alive的功能
    项目主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,同时也可以很大程度上减少接口请求,减小服务器压力

    3.keep-alive的使用场景
    场景:A首页、B列表页、C详情页
    三个页面:A B C 三个路由
    搭配路由守卫经行缓存
    路由组件的缓存:
    A=>B B=>A ,A组件路由被缓存了
    A=>C C=>A ,A组件路由不缓存

    4.可以在路由文件中设置meta进行哪些需要缓存哪些不需要缓存

      <!--缓存的视图-->
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                        </router-view>
                    </keep-alive>
                    <!--不缓存的视图-->
                    <router-view v-if="!$route.meta.keepAlive">
                    </router-view>     
    path: '/classify',
        name: 'classify',
        component: () => import('@/views/classify/classify.vue'),
        meta: {
          title: '111',
          keepAlive: true
        }
      },

    5.vue新增的周期函数以及属性的注意事项include exclude
    (1)Vue中提供了一个内置组件keep-alive,使用元素将动态组件包裹起来,内部组件就会被缓存起来。

    (2)包裹的组件,加载过的页面,再次进入时,是不会执行页面第一次进入时的部分生命周期函数。

    (3)包裹的组件会新增两个生命周期函数activated和deactivated.

    两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存,
    exclude包含的组件不会被缓存。

    6.使用include、exclude属性和beforeRouteEnter钩子函数
    首先介绍一下include和exclude
    是在vue2.0以后新增的属性
    include是需要缓存的组件;
    exclude是除了某些组件都缓存;
    include 和 exclude 属性允许组件有条件地缓存。
    二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

    beforeRouteEnter钩子函数
    局部守卫

    beforeRouteEnter(to, from, next) {  
    // To Do
    //to: 代表的是你想要进入的路由配置对象
    //from: 代表的是你从哪来调过来的
    //next: 是否让to进入from  next()
      },  
    展开全文
  • nuxt keep-alive :keep-alive-props="{ include: includeArr }" /> // js data () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 } } 2、在组件中添加name属性 这个是好多网上教程...

    1、在标签上添加属性

    <nuxt  keep-alive :keep-alive-props="{ include: includeArr }" />
    
    // js
    data () {
    	return {
    		includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组
    	}
    }
    

    2、在组件中添加name属性

    这个是好多网上教程没有点明的,这里重点提出。一定要在组件中加上对应的name

    export default {
    	name: 'cardApplyQuery'
    }
    

    其他 expend 等属性也是支持的。不详细列出。


    码字不易,觉得有帮助的小伙伴右上角点个赞鼓励下~

    在这里插入图片描述

    扫描上方二维码关注我的订阅号~

    展开全文
  • keep-alive></keep-alive></code></pre>, the component will sometimes trigger onInfinite indefinitely while the parent component is inactive (cached). <p>You can recreate the condition using ...
  • 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex、vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态...
  • ve got a disconnect after the keep-alive-timeout every time. It already works great with Firefox and Chrome, so I expect a problem with sending the keep-alive-message, only when using the Internet ...
  • The problem is that it ends the dialog on missing even one keep-alive response. Missing a response is possible when the client is handling the network change and keep-alive is sent around that time. ...

空空如也

1 2 3 4 5 ... 20
收藏数 9,640
精华内容 3,856
关键字:

keep-alive