keepAlive

[Narutocc]

keep-alive是Vue的内置组件，用来缓存组件，能在组件切换过程中将状态保留在内存中，避免多次加载相应的组件，防止重复渲染DOM，减少性能消耗。

keep-alive使用场景：路由发生跳转但是返回需要保留数据。

1. 在路由配置页面中，给需要保留状态的路由地址配置keepAlive: true

{
  path: '/home',
  component: Home,
  meta: {
    title: 'home',
    keepAlive: true
  }
}

2. 在app.vue页面中给用到keep-alive的路由页面加keep-alive标签

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

使用了keep-alive，因为是加了缓存，返回不刷新页面，所以返回不触发created、mounted生命周期钩子，所以触发的代码要写在activated里面。keep-alive生命周期钩子函数：activated、deactivated。

总结：当引入keep-alive的时候，页面第一次进入，钩子的触发顺序是created --> mounted --> activated,退出时触发deactivated。当再次进入（前进或后退）时，只触发activated。

[Narutocc]

执行结果：

首次执行该keep-alive组件： 进入：created -->mounted --> activated 离开：deactivated

第二次执行该keep-alive组件： 进入：activated 离开：deactivated

对于没有设置keep-alive的组件： 进入：created --> mounted 离开：空

activated和deactivated是keep-alive组件特有的生命周期，其作用是： 由于keep-alive对单页路由生效，不论是后退操作，还是跳转操作，当非首次访问组件时，created、mounted不执行，其中的数据请求也不会发起，所以，数据不会进行相应更新。这种设定，符合回退操作的数据状态，但对于大多数的单页跳转操作，会出现数据问题。此时，可利用activated，发起数据请求，更新数据状态。由于是数据驱动的视图，所以在数据请求到达前，组件使用旧数据状态，仍然能给用户不错的视觉体验（不会出现白屏之类的）。