keep-alive

• <keep-alive> 是 Vue 提供的一个抽象组件，用于在组件之间缓存和保持状态，以提高应用程序的性能。下面是 <keep-alive> 的使用方法：

1、示例:

<template>
  <div>
    <button @click="switchName('Child1')">组件1</button>
    <button @click="switchName('Child2')">组件2</button>
    <button @click="switchName('Child3')">组件3</button>
    <keep-alive :max="2">
      <component :is="componentName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import Child3 from './components/Child3.vue'
export default {
  components: {
    Child1,
    Child2,
    Child3
  },
  data() {
    return {
      componentName: 'Child1'
    }
  },
  methods: {
    switchName(componentName) {
      this.componentName = componentName
    }
  }
}
</script>


// 组件一
<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: 'Child1Page',
  activated() {
    console.log('11111111')
  },
  deactivated() {
    console.log('离开1')
  }
}
</script>

//组件二
<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: 'Child2Page',
  // 组件缓存后就不会执行组件的created,mounted,destroyed等钩子了，所以提供了activated、deactivated
  activated() {
    console.log('22222222')
  },
  deactivated() {
    console.log('离开2')
  }
}
</script>

组件三
<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: 'Child3Page',
  activated() {
    console.log('33333333')
  },
  deactivated() {
    console.log('离开3')
  }
}
</script>

• <component> 组件是一个特殊的组件，它可以动态地绑定组件名，从而实现组件的动态切换。通过设置 :is 属性来切换不同的组件

2、keep-alive的三个属性

• include 字符串、数组、或正则表达式，名称匹配的组件会被缓存
• exclude 字符串、数组、或正则表达式，名称匹配的组件不会被缓存
• max 数字，最大支持缓存页面个数

<!-- 字符串 -->
<keep-alive include="Child1,Child2">
  <component :is="componentName"></component>
</keep-alive>

<!-- 正则 -->
<keep-alive :include="/Child1|Child2/">
  <component :is="componentName"></component>
</keep-alive>

<!-- 数组 -->
<keep-alive :include="['Child1','Child2']">
  <component :is="componentName"></component>
</keep-alive>

<!-- 最大缓存组件数 -->
<keep-alive :max="5">
  <component :is="componentName"></component>
</keep-alive>

• 注意： include、exclude如果组件单独设置了name与组件名不一致，应该传入组件的选项对象的name，否则缓存失效。

3、keep-alive提供的生命周期函数

• 组件缓存后就不会执行组件的created,mounted,destroyed等钩子了，所以提供了activated、deactivated

1. activated : 当组件被激活（使用）的时候触发、进入当前页面时触发
2. deactivated： 当组件不被使用、离开页面时触发

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  activated() {
    // 组件激活时触发
    // 可以在这里执行一些需要在组件激活时执行的逻辑
  },
  deactivated() {
    // 组件失活时触发
    // 可以在这里执行一些需要在组件失活时执行的逻辑
  },
};
</script>