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

    2021-01-08 10:49:45
    一、Keep-alive 概念及用法 keep-alive是一个抽象组件:它自身不会渲染DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 <keep-alive> <...

    一、Keep-alive 概念及用法

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

    <keep-alive>
      <component></component>
    </keep-alive>
    
    props:

    Include包含的组件 (字符串、数组、正则表达式) include='a'

    Exclude 不包含的组件

    Max 缓存组件的最大值(字符串、数字)

    注:
    • keep-alive 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称
    • 当匹配条件同时在 includeexclude 存在时,以 exclude 优先级最高

    二、生命周期及钩子

    传统的生命周期:

    1. beforeCreate(){}在执行的时候,***data还有methods都没有被初始化***
    2. created(){} ,***data还有methods都被初始化好了***,如果要调methods方法或者操作data里面的数据,最早只能在created里面进行操作。
    3. beforeMount(){} 表示***模板已经在内存中编辑完成了,但是尚未渲染到模板页面中。***即页面中的元素,没有被真正的替换过来,只是之前写的一些模板字符串。
    4. mounted(){}表示***内存中模板已经真实的挂载到页面中去了***,用户可以看到渲染好的界面了
    5. beforeUpdate(){} 表示***我们的界面还没更新 但是data里面的数据是最新的***。即页面尚未和最新的data里面的数据包吃同步。
    6. update(){} 表示***页面和data里面的数据已经包吃同步了 都是最新的***。
    7. beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
    8. Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了
    keep-alive:

    keep-alive包含的组件不会被再次初始化,缓存的组件不会被mounted,也就意味着不会重走生命周期函数

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

    1. activatedkeep-alive 包含的组件再次渲染的时候触发
    2. deactivatedkeep-alive 包含的组件销毁的时候触发
    注:

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

    1. 页面第一次进入,钩子的触发:created-> mounted-> activated

    2. 退出时:触发deactivated。

    3. 当再次进入(前进或者后退)时:触发activated。

    三、源码分析

    算法:

    LRU算法Least Recently Use(最近最少使用):

    在 this.cache 对象中存储该组件实例并保存 key 值,之后检查缓存的实例数量是否超过 max 的设置值,超过则根据 LRU 置换策略删除最近最久未使用的实例(即是下标为 0 的那个 key)

    展开全文
  • 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

    2021-01-06 21:00:23
    vue中keep-alive的使用 概念 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也...

    vue中keep-alive的使用

    概念

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

    作用

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

    原理

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

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

    参数(Props)

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

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

    1. activated

    在 keep-alive 组件激活时调用

    1. deactivated

    在 keep-alive 组件离开时调用

    正常生命周期:beforeRouteEnter --> created --> mounted --> updated -->destroyed
    
    使用keepAlive后生命周期:
    首次进入缓存页面:beforeRouteEnter --> created --> mounted --> activated --> deactivated
    再次进入缓存页面:beforeRouteEnter --> activated --> deactivated
    
    注:
    1、这里的activated非常有用,因为页面被缓存时,created,mounted等生命周期均失效,你若想进行一些操作,那么可以在activated内完成(下面会举个栗子:列表页回到上次浏览位置)
    2、activated   keep-alive组件激活时调用,该钩子在服务器端渲染期间不被调用。 
    3、deactivated   keep-alive组件停用时调用,该钩子在服务端渲染期间不被调用。
    

    缓存整个项目

    在 App.vue 里面

    如果需要缓存整个项目,则如下设置(直接包裹根router-view即可)<template>
      <div id="app">
      	<keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>使用keepAlive后生命周期发生了哪些变化
    
    
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    

    结合Router,缓存部分页面

    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    2、在router.js路由页设置:
    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  // 需要缓存
          	  }
            }
          ]
        }
      ]
    })
    

    注:

    配置了keepAlive的页面,在再次进入时不会重新渲染,该页面内的组件同理不会再次渲染。而这可能会导致该组件内的相关操作(那些每次都需要重新渲染页面的操作:如父子组件间的传值)不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug

    使用新增属性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>
    
    注:匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配
    
    展开全文
  • Keep-Alive

    2021-01-19 11:54:08
    keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 <keep-alive> 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <...
  • <div><ul><li>keep-alive = when set to enabled, socket option will be set with system wide settings for Time, Interval & Probes.</li><li>keep-alive-time - time in seconds to override the ...
  • keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载 <keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染 比如有一个列表和一个...
  • 好程序员分享http的keep-alive和tcp的keep-alive区别1、HTTP Keep-Alive 在http早期,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就断开这个tcp连接。 使用keep-alive可以改善这种状态,即在一次...
  • nuxt keep-alive :keep-alive-props="{ include: includeArr }" /> // js data () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 } } 2、在组件中添加name属性 这个是好多网上教程...
  • http的keep-alive和tcp的keep-alive区别 1、HTTP Keep-Alive  在http早期,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就断开这个tcp连接。  使用keep-alive可以改善这种状态,即在一次TCP...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,630
精华内容 5,852
关键字:

keep-alive