精华内容
下载资源
问答
  • keep-alive

    2021-06-01 20:16:27
    vue中如何使用keep-alive 1.keep-alive的概念 1.1: keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会...

    vue中如何使用keep-alive

    1.keep-alive的概念

    keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。

    2.keep-alive的作用

    在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性

    3.生命周期函数

    被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated
    使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

    1. activated
            在 keep-alive 组件激活时调用
            该钩子函数在服务器端渲染期间不被调用

    2. deactivated
            在 keep-alive 组件停用时调用
        该钩子在服务器端渲染期间不被调用

    4:缓存所有的页面

    1:在APP.vue里面

    
      	<keep-alive>
          <router-view/>
        </keep-alive>
    
    
    

    5.根据条件缓存页面

    1:在 App.vue 里面

    
      <div id="app">
      	// 1. 将缓存 name 为 test 的组件
      	<keep-alive include='test'>
          <router-view/>
        </keep-alive>
    	
    	// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
    	<keep-alive include='a,b'>
      	  <router-view/>
    	</keep-alive>
    	
    	// 3. 使用正则表达式,需使用 v-bind
    	<keep-alive :include='/a|b/'>
      	  <router-view/>
    	</keep-alive>	
    
    	
    	// 5.动态判断
    
    	<keep-alive :include='includedComponents'>
      	  <router-view/>
    	</keep-alive>
    	
    	// 5. 将不缓存 name 为 test 的组件
    	<keep-alive exclude='test'>
      	  <router-view/>
    	</keep-alive>
      </div>
    
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    

    6.结合Router,缓存部分页面

    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          redirect: 'goods',
          children: [
            {
              path: 'goods',
              name: 'goods',
              component: Goods,
              meta: {
            	keepAlive: false // 不需要缓存
          	  }
            },
            {
              path: 'ratings',
              name: 'ratings',
              component: Ratings,
              meta: {
            	keepAlive: true  // 需要缓存
          	  }
            },
            {
              path: 'seller',
              name: 'seller',
              component: Seller,
              meta: {
            	keepAlive: true  // 需要缓存
          	  }
            }
          ]
        }
      ]
    })
    
    展开全文
  • vue中keep-alive的使用及详解

    万次阅读 多人点赞 2019-05-19 09:03:35
        keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。...

    概念

        keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。

    作用

        在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性

    原理

        在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

        VNode:虚拟DOM,其实就是一个JS对象

    Props

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • max - 数字。最多可以缓存多少组件实例。

    生命周期函数

      1. activated

          在 keep-alive 组件激活时调用
          该钩子函数在服务器端渲染期间不被调用

      2. deactivated

          在 keep-alive 组件停用时调用
          该钩子在服务器端渲染期间不被调用

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

        使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

        注意: 只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子函数依然不会被调用!另外,在服务端渲染时,此钩子函数也不会被调用。

    缓存所有页面

    1. 在 App.vue 里面
    <template>
      <div id="app">
      	<keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    

    根据条件缓存页面

    1. 在 App.vue 里面
    <template>
      <div id="app">
      	// 1. 将缓存 name 为 test 的组件
      	<keep-alive include='test'>
          <router-view/>
        </keep-alive>
    	
    	// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
    	<keep-alive include='a,b'>
      	  <router-view/>
    	</keep-alive>
    	
    	// 3. 使用正则表达式,需使用 v-bind
    	<keep-alive :include='/a|b/'>
      	  <router-view/>
    	</keep-alive>	
    	
    	// 5.动态判断
    	<keep-alive :include='includedComponents'>
      	  <router-view/>
    	</keep-alive>
    	
    	// 5. 将不缓存 name 为 test 的组件
    	<keep-alive exclude='test'>
      	  <router-view/>
    	</keep-alive>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    

    结合Router,缓存部分页面

    1. 在 router 目录下的 index.js 文件里
    import Vue from 'vue'
    import Router from 'vue-router'
    const Home = resolve => require(['@/components/home/home'], resolve)
    const Goods = resolve => require(['@/components/home/goods'], resolve)
    const Ratings = resolve => require(['@/components/home/ratings'], resolve)
    const Seller = resolve => require(['@/components/home/seller'], resolve)
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          redirect: 'goods',
          children: [
            {
              path: 'goods',
              name: 'goods',
              component: Goods,
              meta: {
            	keepAlive: false // 不需要缓存
          	  }
            },
            {
              path: 'ratings',
              name: 'ratings',
              component: Ratings,
              meta: {
            	keepAlive: true  // 需要缓存
          	  }
            },
            {
              path: 'seller',
              name: 'seller',
              component: Seller,
              meta: {
            	keepAlive: true  // 需要缓存
          	  }
            }
          ]
        }
      ]
    })
    
    1. 在 App.vue 里面
    <template>
      <div id="app">
      	<keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    展开全文
  • Keep-alive

    2020-07-19 13:00:52
    文章目录kepp-alive 的了解keep-alive 什么时候使用keep-alive 作用动态组件 keepalive 缓存1 .组件缓存1.include 字符串或正则表达,只有匹配的组件会被缓存1)include数组形式:2)include字符串形式2.exclude ...

    kepp-alive 的了解

    <keep-alive/> 是Vue的内置组件  
    <keep-alive/> 包裹动态组件时,会 缓存不活动的组件实例 ,而不是销毁它们。
    (可以使被包含的组件保留状态,或避免重新渲染)
    	在vue 2.1.0 版本之后,keep-alive新加入了两个属性: 
    include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 
    

    keep-alive 什么时候使用

    例子
    	1.在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,     
    返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,
    但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,
    这时候就需要用到 vue 的 keep-alive 技术了.
    	2.当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置
    然后又去购物车页面,再回到首页的时候能够保存住我刚才滑动的位置
    

    keep-alive 作用

    A.能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。避免反复渲染影响页面性能,同时也可以很大程度		上减少接口请求,减小服务器压力。
    B.路由组件缓存
    C.组件缓存
    

    动态组件 keepalive 缓存

    1 .组件缓存

    将想要缓存得组件进行包裹,
    使用keep-alive的include属性 include后面根的是组件的名字
    

    1.include 字符串或正则表达,只有匹配的组件会被缓存

    1)include数组形式:

    	<keep-alive :include="['count','todo']">
    		<count ></count>
    		<todo ></todo>
    	</keep-alive>
    

    2)include字符串形式

    <keep-alive include="count,todo">
    	<count ></count>
    	<todo ></todo>
    </keep-alive>
    

    2.exclude 字符串或正则表达式,任何匹配的组件都不会被缓存

    <keep-alive exclude="test-keep-alive">
      <!-- 将不缓存name为test-keep-alive的组件 -->
      <component></component>
    </keep-alive>
    

    2.路由组件缓存

    路由表中进行配置:
    在配置路由的时候需要给路由添加meta属性,用keepAlive标示是否被缓存
    
    //示例:
    {
    	path: '/',
    	name: 'List',
    	component: List,
    	meta:{
    		keepAlive:false // 想要缓存的路由组件 就设置为true, 反之false
    	 }
    },
    
    判断router-view是否被包裹
    
    <keep-alive>
    	<router-view v-if="$route.meta.keepAlive" class="view"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" class="view"><router-view>
    

    keep-alive 生命周期

      在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated
      activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,
    否则则不存在当引入keep-alive的时候,页面第一次进入,
    钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。
    当再次进入(前进或者后退)时,只触发activated。
    注:只有当组件 <keep-alive> 内被切换,才会触发这两个钩子函数
    
    export default {
      name: "",
      data() {
        return {
        };
      },
      props: {},
      components: {},
      mounted() {},
      methods: {},
      activated(){
        console.log('activated')
      },
      deactivated(){
        console.log('deactivated')
      }
    };
    
    展开全文
  • 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()
      },  
    展开全文
  • keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 场景 用户在某个列表页面选择筛选条件过滤出一份数据...
  • nuxt keep-alive :keep-alive-props="{ include: includeArr }" /> // js data () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 } } 2、在组件中添加name属性 这个是好多网上教程...
  • keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载 <keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染 比如有一个列表和一个...
  • 关于http keep-alive与tcp keep-alive

    千次阅读 2016-06-16 02:10:24
    1、什么是HTTP  Keep-Alive模式  我们知道HTTP协议采用“请求-应答”模式,...当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Ke
  • http keep-alive与tcp keep-alive
  • I researched this and was led to <a href="https://stackoverflow.com/questions/8232068/how-can-i-enable-keep-alive">How can I enable keep-alive?</a> and ...
  • 解决:保留查询条件很简单,直接引入keep-alive,但是清除的话,vue本身没有api直接清除,所以要单独处理。 参考文章:http://aspedrom.com/5HD5 router/index,拦截路由并做处理: beforeRouteLeave:function...
  • Http keep-alive 与Tcp keep-alive

    千次阅读 2016-03-31 17:01:50
    前两天面试遇到一个问题:如果让你...而且以为Http keep-alive与Tcp keep-alive是差不多的,所以根本没去讲两者之间的keep-alive。每次面试回答问题都有点着急,所以思考不够。实际上两者是不同的,下面分别介绍一下。
  • 什么是Keep-Alive 这个词看着有点熟,很多地方好像都见过。 TCP的KeepAlive,Http的KeepAlive,现在就连一些前端框架都有类似KeepAlive的东西了(比如VUE.js,保持路由)。 本文介绍HTTP和TCP中的KeepAlive机制,...
  • keep-alive></keep-alive> 的作用是 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染组件 转载于:https://www.cnblogs.com/maggie-pan/p/9960488.html...
  • Keep-Alive

    2015-09-05 10:38:30
    HTTP是一个请求<->响应模式的...这样的模式有一个很大的优点就是,它很简单,很容易理解和编程实现;它也有一个很大的缺点就是,它效率很低,因此Keep-Alive被提出用来解决效率低的问题。 Keep-Alive功能使客户端到
  • 在vue项目中,尤其是h5制作的app,来回跳转的时候,有的地方需要做缓存,一来防止页面...- keep-alive 1. <router-view> <router-view> 组件用于渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自...
  • HTTP keep-alive详解

    万次阅读 多人点赞 2017-10-29 17:17:15
    1.为什么要有Connection: keep-alive?在早期的HTTP/1.0中,每次http请求都要创建一个连接,而创建连接的过程需要消耗资源和时间,为了减少资源消耗,缩短响应时间,就需要重用连接。在后来的HTTP/1.0中以及HTTP/1.1...
  • http keep-alive

    万次阅读 2020-09-17 21:27:17
    client发出的HTTP请求头需要增加Connection:keep-alive字段 Web-Server端要能识别Connection:keep-alive字段,并且在http的... 告诉client,我能提供keep-alive服务,并且"应允"client我暂时不会关闭socket连接 ...
  • keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其包裹组件的渲染 二、keep-alive介绍与应用 2.1 keep-alive是什么 keep-alive是一个抽象组件:它...
  • vue-router keep-alive

    2019-11-11 09:10:19
    keep-alive的作用 在vue项目中,当路由被频繁切换,路由对应的组件也会在页面上频繁地创建和销毁。 为了避免这种情况的发生,可以使用keep-alive,保留每一个被激活过的组件。 当路由离开,组件不会被销毁,当路由...
  • keep-alive实现原理

    2020-08-10 14:34:31
    keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其包裹组件的渲染 二、keep-alive介绍与应用 2.1 keep-alive是什么 keep-alive是一个抽象...
  • umi-plugin-keep-alive 中文说明 | 此 <KeepAlive> 功能基于 在线示例 umi 多 tabs 示例: 使用方法 安装 npm install umi-plugin-keep-alive --save # or yarn add umi-plugin-keep-alive 从 umi 中导出 KeepAlive...
  • Vue的Keep-alive组件详细介绍

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 144,389
精华内容 57,755
关键字:

keep-alive