当前位置：首页 > article >正文

『VUE』33. 组件保持存活,切换组件时的生命周期（详细图文注释）

article 2024/11/28 2:52:56

动态切换组件导致的问题

动态切换组件使得每次组件都会被卸载然后重新初始化,导致数据每次都初始化,无法保存前一个组件的数据.
在这里插入图片描述

ComponentA.vue

<template>
  <h3>ComponentA</h3>
  <p>状态:{{ message }}</p>
  <button @click="changeStatus">开关切换</button>
</template>

<script>
export default {
  data() {
    return {
      message: "关闭",
    };
  },
  methods: {
    changeStatus() {
      this.message = this.message == "关闭" ? "开启" : "关闭";
    },
  },
  beforeUnmount() {
    console.log("组件卸载之前");
  },
  unmounted() {
    console.log("组件卸载之后");
  },
};
</script>

引入keeplive标签

keeplive标签包裹component 标签,使得存活不会被销毁
初始状态关闭
在这里插入图片描述
开关切换变成了开启

两次切换组件后回到了A发现还是开启的而不是默认的关闭

app.vue

<template>
  <KeepAlive>
    <component :is="choseComponent"></component>
  </KeepAlive>

  <button @click="changeComponent">切换组件</button>
</template>

<script>
import ComponentA from "./components/ComponentA.vue";
import ComponentB from "./components/ComponentB.vue";

export default {
  data() {
    return {
      choseComponent: "ComponentA",
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
  methods: {
    changeComponent() {
      console.log(this.choseComponent);
      this.choseComponent =
        this.choseComponent == "ComponentA" ? "ComponentB" : "ComponentA";
    },
  },
};
</script>

componentA.vue

<template>
  <h3>ComponentA</h3>
  <p>状态:{{ message }}</p>
  <button @click="changeStatus">开关切换</button>
</template>

<script>
export default {
  data() {
    return {
      message: "关闭",
    };
  },
  methods: {
    changeStatus() {
      this.message = this.message == "关闭" ? "开启" : "关闭";
    },
  },
  beforeUnmount() {
    console.log("组件卸载之前");
  },
  unmounted() {
    console.log("组件卸载之后");
  },
};
</script>