vue中的keep-alive

keep-alive的概念

            keep-alive是Vue的内置组件,当他包裹;它自身不会渲染成一个DOM元素,也不会出现在父组件链中.

作用

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

原理

            在createdh函数调用时将需要缓存的 VNode 节点保存在this.cache中 / 在render(页面渲染)时,

如果在VNode的name符合缓存条件,则会从this.cache中取出之前缓存的VNode实例进行渲染

            VNode : 虚拟DOM,就是一个js对象

Props

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

声明周期函数

被包含在keep-alive中创建的组件,会多出两个声明周期的钩子函数 : activated和deactivated 他们两个都  在keep-alive 组件激活时调用 ,  该钩子函数在服务器端渲染期间不被调用

缓存所有页面

     在App.vue 里面

 <template>
  <div id="app">
        <keep-alive>
           <router-view></router-view>
         </keep-alive>
    </div>
</template>

根基条件缓存页面

  在App.vue里面

然后我们结合 router.js,缓存部分页面