精华内容
下载资源
问答
  • Keep-live

    2020-07-19 18:17:34
    Keep-alive简介 keep 是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法也很简单 <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-...

    Keep-alive简介

    keep 是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
    用法也很简单

    <keep-alive>
      <component>
        <!-- 该组件将被缓存! -->
      </component>
    </keep-alive>
    

    props

    • include-字符串或正则表达式,只会匹配的组件会被渲染
    • exclude-字符串或正则表达式,任何匹配的组件都不会被缓存
    // 组件 a
    export default {
      name: 'a',
      data () {
        return {}
      }
    }
    
    <keep-alive include="a">
      <component>
        <!-- name 为 a 的组件将被缓存! -->
      </component>
    </keep-alive>可以保留它的状态或避免重新渲染
    
    <keep-alive exclude="a">
      <component>
        <!-- 除了 name 为 a 的组件都将被缓存! -->
      </component>
    </keep-alive>可以保留它的状态或避免重新渲染
    

    用法:
    缓存动态组件:
    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

    <!-- 基本 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
     
    <!-- 多个条件判断的子组件 -->
    <keep-alive>
      <comp-a v-if="a > 1"></comp-a>
      <comp-b v-else></comp-b>
    </keep-alive>
    

    缓存路由组件:

    使用keep-alive可以将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件,keep-alive大多数使用场景就是这种。

    方式一:vue文件中
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
     
    方式二:router.js中
    {
            path: '/as',
            icon: 'earth',
            title: '赠品管理',
            name: 'as',
            component: Main,
            children: [{
                path: 'a',
                title: '赠品管理',
                name: 'a',
                component: () =>
                    import ('@/views/a/index.vue'),
                meta:{
                    keepAlive:true
                }
            }]
        }
    

    缓存你想要缓存的:

    使用v-if通过路由元信息判断缓存哪些路由

      <keep-alive>
         <router-view v-if="$route.meta.keepAlive">
             <!--这里是会被缓存的路由-->
         </router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive">
         <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
     </router-view>
     //router配置
     new Router({
       routes: [
         {
           path: '/',
           name: 'home',
           component: Home,
           meta: {
             keepAlive: true // 需要被缓存
           }
         },
         {
           path: '/edit',
           name: 'edit',
           component: Edit,
           meta: {
             keepAlive: false // 不需要被缓存
           }
         }
       ]
     });
    

    生命周期钩子:

    在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated

    activated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用

    deactivated:组件被停用(离开路由)时调用

    缓存组件的使用方式:

      <!-- 逗号分隔字符串 -->
        <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>
    

    但更多场景中,我们会使用keep-alive来缓存路由:

    <keep-alive include='a'>
        <router-view></router-view>
    </keep-alive>
    

    注:当组件被exclude匹配,该组件将不会被缓存,不会调用activated 和 deactivated。

    展开全文
  • vue keep-live使用

    2021-05-31 09:48:51
    vue keep-live使用 今天,帮别人解决了一个问题,就是做vue电商项目时,请求分类数据,第二次进入分类页数据缓存了,上一次的数据也在页面中出现。 解决思路 首先,判断数据没有清空。 因为,数据一定进行了缓存。 ...

    vue keep-live使用

    今天,帮别人解决了一个问题,就是做vue电商项目时,请求分类数据,第二次进入分类页数据缓存了,上一次的数据也在页面中出现。

    解决思路

    首先,判断数据没有清空。
    因为,数据一定进行了缓存。
    知道问题,就找到问题发生的地方。

    排除

    // 引入持久化插件,刷新数据不丢失

    import forover from ‘vuex-persistedstate’
    持久化插件没问题

    最后,app.vue的keep-live使用错误

    解决:

    <router-view v-if="!$route.meta.keepAlive"/>
     <!-- 路由元信息keepAlice为home组件缓存,其他的不缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    
    展开全文
  • keep-live for react

    2019-11-06 09:32:23
    react 中 实现类似 vue中 keep-live的效果 网上案列多达4-5种 这里列下用到的3种 手动按照需求 (粗暴 直接) 使用插件 react-activation ( 在原有路由添加) 使用插件 react-router-cache-route (改动原本...

    react 中 实现类似 vue中 keep-live的效果

    网上案列多达4-5种 这里列下用到的3种

    1. 手动按照需求                        (粗暴 直接
    2. 使用插件 react-activation           ( 在原有路由添加
    3. 使用插件 react-router-cache-route (改动原本路由渲染标签

    手动设置

    设置缓存或者全局状态管理 , 然后在生命周期里就进行数据恢复  (简单 粗暴 每个人可以按照自己的逻辑去写)

    插件1 react-activation

    // 使用 keep-live 缓存  方案之 react-activation
    import React from 'react';
    import { HashRouter, Route, Switch, Link } from 'react-router-dom';
    import Routers from "../../router"
    import KeepAlive, { AliveScope } from 'react-activation'
    const App = () => (
      <HashRouter>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/Demo">Demo</Link>
          </li>
          <li>
            <Link to="/User">User</Link>
          </li>
        </ul>
    
        <Switch>
          <AliveScope>
            {Routers.map((item, index) => {
              return <Route key={index} path={item.path} exact render={props => {
                console.log(item)
                return <KeepAlive><item.component cache {...props} /></KeepAlive>
              }} />
    
            })
            }
            {/* // 所有错误路由跳转页面 */}
            {/* <Route component={NotFound} /> */}
          </AliveScope>
        </Switch>
      </HashRouter >
    );
    
    
    export default App;
    

    插件1  react-router-cache-route

    // 使用 keep-live 缓存  方案之 react-router-cache-route
    import React from 'react';
    import Routers from "../../router"
    import { HashRouter as Router, Link } from 'react-router-dom'
    import CacheRoute, { CacheSwitch } from 'react-router-cache-route'
    const App = () => (
      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/Demo">Demo</Link>
          </li>
          <li>
            <Link to="/User">User</Link>
          </li>
        </ul>
    
        <CacheSwitch>
          {Routers.map((item, index) => {
            return <CacheRoute key={index} path={item.path} exact render={props => {
              console.log(item)
              return <item.component cache {...props} />
            }} />
    
          })
          }
          {/* // 所有错误路由跳转页面 */}
          {/* <CacheRoute component={NotFound} /> */}
        </CacheSwitch>
      </Router >
    );
    
    
    export default App;
    

     

    展开全文
  • TCP keep-live解读

    2019-06-26 14:12:58
    对于好多标准的库函数不会熟记于心真正在用到的时候才查看具体的作用和参数所代表的意思,对于setsockopt 在搜索的时候好多都是不负责任的转载 SOL_SOCKET SOL_TCP根本看不到 在这里介绍一下 TCP keep-live和send/...

    对于好多标准的库函数不会熟记于心真正在用到的时候才查看具体的作用和参数所代表的意思,对于setsockopt 在搜索的时候好多都是不负责任的转载 SOL_SOCKET SOL_TCP根本看不到 在这里介绍一下 TCP keep-live和send/recv 心跳检测

    1:功能

    TCP keep-live 和send/recv 心跳检测 作用一样都是为了保持活力,检测网络连接状态,

    可能有些人要问为什么要保持活力,也许初始网络的人不是很了解,

    ->:很多防火墙等对于空闲socket自动关闭功能

    ->:对于服务器端来说,客户端的异常断开情况服务器是无法检测到的,只能通过心跳检测以便回收资源

    2:差异

    顾名思义keep-live 是TCP协议独有的一个功能,也就仅限于TCP,调用简单只需要调用如下函数,使用起来方便,只需要两次数据交互即可 另一端无需专门实现

    int keepAlive = 1; // 开启keepalive属性. 缺省值: 0(关闭)

    int keepIdle = 60; // 如果在60秒内没有任何数据交互,则进行探测. 缺省值:7200(s)

    int keepInterval = 5; // 探测时发探测包的时间间隔为5秒. 缺省值:75(s)

    int keepCount = 2; // 探测重试的次数. 全部超时则认定连接失效..缺省值:9(次)

    setsockopt(s, SOL_SOCKET, SO_KEEPALIVE, (void*)&keepAlive, sizeof(keepAlive));

    setsockopt(s, SOL_TCP, TCP_KEEPIDLE, (void*)&keepIdle, sizeof(keepIdle));

    setsockopt(s, SOL_TCP, TCP_KEEPINTVL, (void*)&keepInterval, sizeof(keepInterval));

    setsockopt(s, SOL_TCP, TCP_KEEPCNT, (void*)&keepCount, sizeof(keepCount));

    send/recv 机制实现心跳则是在服务器和客户端的应用层根据个人喜好写的一份检测程序,灵活性高

    能够知道对端断线或者是正常断开 有利于后续对断线类的单独处理(如游戏中 断线正常连上不扣积分,强制断开逃跑扣积分等等)

     

     

    展开全文
  • keep-live默认Windows Live Writer has a great feature that detects the style of your blog and allows you to write posts in a way that looks similar to your site, but sometimes it goes wrong, and there...
  • http keep-live

    2018-06-21 14:06:02
    http://www.cnblogs.com/skynet/archive/2010/12/11/1903347.html
  • 解决keep-live使用之后的问题

    千次阅读 2018-09-10 09:26:42
    keep-aliv能够帮助我们实现页面ajax请求只被请求一次,在你跳转页面的时候,也不会被请求多次,可是比如在旅游页面中,当我们在城市选择页面重新选择城市,这个时候就需要重新发送一个ajax请求,来显示对应城市的...
  • websocket vs keep-live

    2013-09-22 15:50:00
    地址:http://stackoverflow.com/questions/17608551/how-is-websocket-different-than-http-with-header-connection-keep-alive-million 转载于:https://www.cnblogs.com/ustccjw/p/3333259.html
  • ie keep-liveDo you like to send notes and links to yourself or others while browsing with Internet Explorer 8? Now you can use your Windows Live e-mail account to send that information out using the S...
  • 以vue中后台案例页面文件是这样的(路由里面的名称和vue页面中的名称要一致,且必须都要写) nested menu1 menu1-1 menu1-2 menu1-2-1 const nestedRouter = { ... title: 'Nested Routes',
  • vue中keep-alive的使用及详解

    万次阅读 多人点赞 2019-05-19 09:03:35
        keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。...
  • keep-live组件是vue的内部组件,主要用于缓存内部组件实例。这样做的目的在于keep-alive内部组件切换时,不需要重新创建组件实例,比如说使用v-if来决定在满足什么条件下使用哪个组件,还有就是路由切换,有个<...
  • keep-live组件是vue的内部组件,主要用于缓存内部组件实例。这样做的目的在于keep-alive内部组件切换时,不需要重新创建组件实例,比如说使用v-if来决定在满足什么条件下使用哪个组件,还有就是路由切换,有个<...
  • Http长链接和Connection:keep-alive的解答

    万次阅读 2016-09-22 15:39:47
    因为自己使用http请求都是,请求-...每次通信后,其链接断开。 ...客户端的请求头带上 Connection: keep-alive ...该方式可以使一次TCP连接为同意用户的多次请求服务,提高了响应速度。...因为http是无状态的,而且keep-live
  • HTTP keep-alive详解

    万次阅读 多人点赞 2017-10-29 17:17:15
    1.为什么要有Connection: keep-alive?在早期的HTTP/1.0中,每次http请求都要创建一个连接,而创建连接的过程需要消耗资源和时间,为了减少资源消耗,缩短响应时间,就需要重用连接。在后来的HTTP/1.0中以及HTTP/1.1...
  • keep-alive页面缓存 页面缓存知识: 用keep-alive包裹的路由页面路由地址不改变时,组件实例不会被销毁不会触发created和mounted生命周期,但是会触发activated生命周期。 keep-alive生命周期 activated:keep-...
  • vue中处理在keep-live缓存情况下,页面的刷新 可以监听路由: 如何设置缓存,可参考: https://blog.csdn.net/weixin_41164499/article/details/90718155
  • Vue的Keep-alive组件详细介绍

    万次阅读 2019-08-03 11:54:16
    keep-alive组件的使用方法: keep-alive组件的注意事项: 用了这个组件后就没有组件就没有created生命周期了。 activared vue可以使用keep-alive包裹一个动态路由组件,包裹之后,动态组件的状态会被缓存。如果...
  • keep-alive属性及生命周期

    万次阅读 2019-07-30 11:55:09
    1.activated:页面第一次进入的时候,钩子触发的顺序是created->mounted->activated 2.deactivated :页面...keep-alive是vue内置的一个组件,可以被包含的组件保留状态,或避免重新渲染。 <keep-alive...
  • vue中keep-alive缓存路由/组件

    千次阅读 2019-08-26 13:49:22
    keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似,keep-alive是一个抽象组件:它自身不会渲染...
  • 彻底搞懂Vue中keep-alive

    千次阅读 2019-09-23 17:45:38
    彻底搞懂Vue中keep-alive的魔法(上) 上一节最后稍微提到了Vue内置组件的相关内容,从这一节开始,将会对某个具体的内置组件进行分析。首先是keep-alive,它是我们日常开发中经常使用的组件,我们在不同组件间切换...

空空如也

空空如也

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

keep-live