keep-alive 总结

一. 作用

keep-alive 组件是vue提供的用来缓存组件的组件。

二. 用法

首先需要明白通过路由等方法切换组件，就是在执行组件之间的销毁与重建的流程，那么组件被销毁了，组件中的表单之类的数据，就没有了，但是有时候又需要保存这些数据甚至是组件，那么这就可以使用keep-alive，用法就是：使用 keep-alive 包裹组价即可。

1. 结合路由组件使用

<keep-alive>
    <router-view></router-view>
</keep-alive>

2. 结合动态组件使用

<keep-alive>
      <component :is="view"></component>
</keep-alive>

三. keep-alive 常用的属性

1. include 属性：

作用：用来指定那些组件是需要缓存的，
这个属性可以是字符串，正则表达式，或者数组

// homeView 就是组件的 name 选项， include="homeView,aboutView" 的意思就是，
// 只有homeView,aboutView组件缓存，其他的不缓存
<keep-alive include="homeView,aboutView">
    <router-view></router-view>
</keep-alive>

// 正则表达式：表明只缓存 homeView 组件
<keep-alive :include="/homeView/">
    <router-view></router-view>
</keep-alive>

// 数组方式：数组内的元素就是需要缓存的组件
<keep-alive :include="['homeView', 'aboutView']">
    <router-view></router-view>
</keep-alive>

2. exclude 属性:

这个属性就是用来，指定那些组件是不用缓存的。与 include功能恰好相反，用法一样。这里就不在演示了。

3. max 属性

max 属性的值是一个数字，用来指定最多可以缓存多少个组件。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

四. 与之相关的生命周期函数

组件被缓存之后，在组件切换的时候，与之相关的八个生命周期函数是不会执行，有时候有需要执行一些操作，那么就可以使用这个组件专属的生命周期函数。

actived

这个函数在缓存的组件被激活的时候调用。意思就是进入这个缓存的组件的时候触发该函数。

deactived

这个函数在缓存组件失活的时候调用。就是离开这个缓存的组件的时候触发该函数。

<template>
  <div class="home">
    <h2>HomeView</h2>
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: 'homeView',
  // 进入 home 组件的时候，这个函数被触发
  activated() {
    console.log('home actived')
  },
    
    
  // 离开这个组件的时候，这个函数被触发
  deactivated() {
    console.log('home deactivated')
  }
}
</script>

vue2-keep-alive 组件总结