Vue中activated和deactivated生命周期钩子在keep-alive组件中的使用详解

<template>
  <!-- 这是组件的模板部分 -->
  <div>
    <h1>这是一个被 keep-alive 包裹的组件</h1>
  </div>
</template>

<script>
export default {
  // 组件被激活时触发的钩子函数
  activated() {
    // 这里可以写一些组件被激活时要执行的代码，比如重新获取数据
    console.log('组件被激活啦！');
    // 可以在这里发送请求获取最新的数据
    // this.fetchData(); 
  },
  methods: {
    // 模拟获取数据的方法
    fetchData() {
      console.log('正在获取数据...');
    }
  }
}
</script>

<template>
  <!-- 这是组件的模板部分 -->
  <div>
    <h1>这是一个被 keep-alive 包裹的组件</h1>
  </div>
</template>

<script>
export default {
  // 组件被停用（隐藏）时触发的钩子函数
  deactivated() {
    // 这里可以写一些组件被停用时要执行的代码，比如停止定时器
    console.log('组件被停用啦！');
    // 可以在这里清除定时器
    // clearInterval(this.timer); 
  },
  data() {
    return {
      // 模拟一个定时器
      timer: null
    };
  },
  mounted() {
    // 在组件挂载时启动定时器
    this.timer = setInterval(() => {
      console.log('定时器在运行...');
    }, 1000);
  }
}
</script>

<template>
  <div>
    <!-- 这里使用 keep-alive 包裹组件 -->
    <keep-alive>
      <!-- 通过 v-if 控制组件的显示和隐藏 -->
      <component-a v-if="showComponentA"></component-a>
      <component-b v-else></component-b>
    </keep-alive>
    <!-- 切换组件的按钮 -->
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      // 控制组件 A 是否显示
      showComponentA: true
    };
  },
  methods: {
    // 切换组件的方法
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    }
  }
}
</script>

<template>
  <div>
    <!-- 这里展示从接口获取的数据 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个变量来存储从接口获取的数据
      message: ''
    };
  },
  created() {
    // 在 created 钩子中发送请求获取数据
    console.log('组件已创建，开始获取数据...');
    // 模拟一个异步请求
    setTimeout(() => {
      this.message = '这是从接口获取的数据';
    }, 1000);
  }
};
</script>

<template>
  <div>
    <!-- 这里有一个需要初始化的 DOM 元素 -->
    <div id="my-element">这是一个需要初始化的元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在 mounted 钩子中操作 DOM
    console.log('组件已挂载，开始操作 DOM...');
    const element = document.getElementById('my-element');
    // 修改 DOM 元素的样式
    element.style.color = 'red';
  }
};
</script>

<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('组件实例刚开始创建，数据和方法都未初始化');
  }
};
</script>

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  beforeMount() {
    console.log('模板编译完成，DOM 还未插入');
    this.message = '修改后的消息';
  }
};
</script>

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  beforeUpdate() {
    console.log('数据已更新，DOM 即将更新');
  }
};
</script>

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p ref="messageRef">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  updated() {
    console.log('DOM 已更新');
    console.log('更新后的 DOM 元素内容:', this.$refs.messageRef.textContent);
  }
};
</script>

<template>
  <div></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

let timer;
onMounted(() => {
  timer = setInterval(() => {
    console.log('定时器在运行');
  }, 1000);
});

onBeforeUnmount(() => {
  console.log('组件即将卸载，清除定时器');
  clearInterval(timer);
});
</script>

<template>
  <div></div>
</template>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('组件已卸载');
});
</script>