浅谈Keep-alive的使用

Vue内置组件中有一名为keep-alive的组件

其作用为缓存

举一例

现有三个组件

Comp1，Comp2，Comp3

<template>
  <div>
    <h1>1</h1>
    <input type="text" />
  </div>
</template>

<script>
export default {
  name: "Comp1",
  created() {
    console.log("Comp1.created");
  },
  mounted() {
    console.log("Comp1.mounted");
  },
  destroyed() {
    console.log("Comp1.destroyed");
  },
};
</script>

<style>
</style>

三个子组件都是这样的

父组件是使用component的is来切换组件显示

<template>
  <div class="home">
    <button @click="curIndex = (curIndex + 1) % comps.length">切换</button>
      <component :is="comps[curIndex]"></component>
  </div>
</template>

<script>
import Comp1 from "../components/comp1.vue";
import Comp2 from &#