keep-alive用法及注解

一、为什么要用keep-alive

keep-alive是vue的内置组件，用它包裹动态组件后，组件之间切换不会销毁组件，而是将组件状态缓存在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

例：用户填写表单后跳转至其他路由组件，再返回表单路由组件时，表单不会重置

二、怎么用keep-alive

方法1：在App.vue中，keep-alive 结合include/exclude 属性缓存组件

//include值为字符串或者正则表达式，匹配的组件会被缓存;
//exclude值为字符串或正则表达式，匹配的组件不会被缓存;

// 缓存所有组件
<keep-alive>
   <router-view />
</keep-alive>

// include 只缓存组件名字为keep的组件，其他组件不会缓存
<keep-alive include="keep">
   <router-view />
</keep-alive>

// exclude不缓存组件名字为keep的组件，其他组件都会缓存
<keep-alive exclude="keep">
   <router-view />
</keep-alive>

方法2：在Route中，keep-alive结合路由中meta属性来控制组件缓存

{
      path: '/keep',
      name: 'keep',
      meta:{
        keepAlive: true  // 需要缓存
      },
      component: keep
}

三、keep-alive的生命周期

使用keep-alive缓存组件后，组件的部分生命周期不会被触发，所以就有了

activated与deactivated生命周期函数

activated：进入组件时调用，在渲染阶段不会被调用
deactivated：离开组件时调用，在渲染阶段不会被调用