用法

 

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

 

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

 

作用

 

在组件切换过程中将状态保留在缓存中，防止重复渲染DOM，减少加载时间及性能消耗，优化用户体验。（主要用于保留组件状态或避免重新渲染）

 

Props

 

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

 

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

 

max - 数字。最多可以缓存多少组件实例。

 

生命周期钩子

 

activated

 

在 keep-alive 组件激活时调用（该钩子函数在服务器端渲染期间不被调用）。

 

deactivated

 

在 keep-alive 组件失活时调用（该钩子在服务器端渲染期间不被调用）。

 

被包含在 keep-alive 中的组件，会多出两个生命周期的钩子：activated 与 deactivated，使用 keep-alive 会将数据保留在缓存中，如果要在每次进入页面的时候获取最新的数据，需要在activated 阶段获取数据（因为被包裹的组件只有在首次渲染才会去执行created、mounted等钩子），承担原来在created、mounted等钩子获取数据的任务。

 

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

 

示例

 

缓存（所有）路由组件

 

App.vue（未使用keep-alive）

 

<template>

 

  <div id="app">

 

    <div id="nav">

 

      <div class="main-content">

 

        <router-link to="/home" active-class="isActive">Home</router-link>

 

        <span>|</span>

 

        <router-link to="/about" active-class="isActive">About</router-link>

 

        <div class="router-view-content">

 

          <!-- 使用 <router-view> 渲染路径匹配到的视图组件 -->

 

          <router-view />

 

        </div>

 

      </div>

 

    </div>

 

  </div>

 

</template>

 

<script>

 

export default {

 

  name: "App"

 

};

 

</script>

 

路由组件1：Home.vue

 

<template>

 

  <div class="home">

 

    <p>This is a Home page</p>

 

    <el-input v-model="inputText" placeholder="请输入" style="width:50%"></el-input>

 

  </div>

 

</template>

 

<script>

 

export default {

 

  name: "Home",

 

  data() {

 

    return {

 

      inputText: "",

 

    };

 

  },

 

};

 

</script>

 

路由组件2：About.vue

 

<template>

 

  <div class="about">

 

    <p>This is an About page</p>

 

    <el-select v-model="value" placeholder="请选择" style="width: 50%">

 

      <el-option

 

        v-for="item in options"

 

        :key="item.value"

 

        :label="item.label"

 

        :value="item.value"

 

      >

 

      </el-option>

 

    </el-select>

 

  </div>

 

</template>

 

<script>

 

export default {

 

  name: "About",

 

  data() {

 

    return {

 

      value: "",

 

      options: [

 

        {

 

          value: "zhangsan",

 

          label: "张三",

 

        },

 

        {

 

          value: "lisi",

 

          label: "李四",

 

        },

 

      ],

 

    };

 

  },

 

};

 

</script>

 

在未使用keep-alive情况下，在Home页面输入框输入内容