vue中keep-alive的使用

vue中keep-alive的使用

什么是keep-alive

• keep-alive是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件：它自身不会渲染成一个dom元素，也不会出现在父组件链中。
  keep-alive的作用
  在组件切换过程中将状态保留在内存中，防止重复渲染Dom，减少加载时间及性能消耗，提高用户体验性。
  keep-alive的原理
  在create函数调用时将需要缓存的VNode节点保存在this.cache中/在render（页面渲染时），如果VNode的name符合缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。
• • VNode:虚拟DOM，其实就是一个JS对象
• 可添加的属性
  include 字符串或正则表达式。只有名称匹配的组件会被缓存
  exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
  max-数字 最多可以缓存多少组件实例

    <!-- 动态组件 -->
    <!-- is属性，值为组件标签名 -->
    可以通过keep-alive保留组件的状态，避免组件的销毁和重建
    include可以设置哪些组件需要缓存
    用逗号分隔组件名，注意不要加空格
    <keep-alive include="kindb,userd">

    <!-- 正则表达式 使用 v-bind  -->
    <keep-alive :include="/^(kindb|userd)$/">

    <!-- 数组，使用v-bind  -->
    <keep-alive :include="['kindb','userd']">
      <component :is="currentType"></component>
    </keep-alive>

生命周期函数

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

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