Vue教程(四十六)keep-alive快速实现页面缓存

Vue教程(四十六)keep-alive快速实现页面缓存

什么是keep-alive

默认情况组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到 keep-alive 组件。

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

keep-alive 的生命周期

初次进入时：created > mounted > activated；退出后触发 deactivated 钩子函数。

再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中。

在vuecli2\src\components\User.vue中验证执行过程

<template>
  <div>
    <h2>用户信息</h2>
    <span>{
   {
   $route.query}}</span>
  </div>
</template>
<script