keep-alive

Posted 2021-03-23 panjingshuang

//  将想要进行缓存的组件使用keep-alive 进行包裹，
//  属性：include 缓存白名单  exclude缓存黑名单  max 最多缓存的组件个数
<template>
    <div>
        <h3>这是主页</h3>
        <router-link to="/home/demo">Demo页面点击</router-link>
  
        <!-- 只能是在同一个router-view中切换的时候才不能够缓存，如果是在不同的目录中进行切换并不会缓存 -->
       <keep-alive >
           <router-view></router-view>
       </keep-alive>
     
    </div>
</template>

<script>

export default {
    name:"home",
    data:function(){
        return {
           
        }
    },
    components:{
      
    }
}
</script>

<style scoped>

</style>

keep-alive是Vue内置的组件。

keep-alive的作用是：

　　保持组件的渲染状态，例如数据列表和数据详情页面，一般情况下，是当点击进入到详情页面再退出详情页面的时候，两个页面再不停的重复创建和渲染，但是使用keep-alive就可以保持原来的数据列表不变。并不会销毁原本的组件。

keep-alive的原理：

　　created:初始化两个对象cache=[]和 Key=[]分别缓存Vnode和Vnode 的key值

　　destory:删除Vnode的实例对象和其key值

　　mounted:实时的监听include和exclude 中的数据

　　render:渲染被keep-alive包裹的组件

 

keep-alive是如何缓存组件的：

　　1.获取到被包裹的子组件和子组件名

　　2.设置include和exclude进行条件匹配，判定当前组件是否被缓存，其中include中存放的是组件的名字

　　3.根据组件id和tag生成key值，并在缓存对象中查找该组件是否缓存过，如果缓存过就直接从缓存对象中获取该组件并更新key在该key数组中的位置（保证LRU置换规则）

　　4.在cache中保存该Key值，并存储该key值所对的组件实例对象，并检查max值

　　5.设置keyAlive属性为true.

 

Vue的渲染过程：

　　new Vue--->init----->compile--->$mount--->render--->vnode---->patch---->Dom

　　keep-alive的作用过程是：patch阶段 ，在虚拟DOM转化成真实Dom之间。

 　　patch中使用：_patch__函数---->createEl() ----- >createComponent();

 

keep-alive是将缓存的组件渲染到页面上：

　　1.一开始的时候加载被包裹的组件的时候调用：i（vnode ,false）

　　2.当再次访问被包裹的组件的时候，vnode.componentInstance是缓存的组件对象，那么会执行insert(parentElm,vnode.elm,refElm) 将上一次的DOM插入到父元素中。

 

keep-alive是不会形成DOM节点的，是如何做到不会将keep-alive渲染到页面上的呢？

　　在Vue初始化的时候，需要给父子组件之间建立联系，根据abstract属性决定是否忽略某个组件。在keep-alive组件中该属性为true则，在建立联系的时候就会跳过该组件，最后Dom树中就不会包含该组件了。

 

 keep-alive相关的钩子函数：actived和deactived函数当页面被激活和失活的时候被掉调用。

　　

来源：https://juejin.im/post/5cce49036fb9a031eb58a8f9