keep-alive缓存组件关闭执行生命周期

`keep-alive` 组件在缓存组件时，会将组件的状态保存下来，以便后续重新渲染时可以恢复组件状态。因此，在缓存组件时，组件实例并不会被销毁，也就不会触发 `beforeDestroy` 生命周期钩子。

但是，在缓存组件被销毁时，会触发 `deactivated` 生命周期钩子，表示组件被缓存起来了。而在重新激活缓存组件时，会触发 `activated` 生命周期钩子，表示组件从缓存中恢复并重新激活了。

因此，在使用 `keep-alive` 组件时，需要注意组件的生命周期钩子的执行顺序和时机，以充分利用好 `keep-alive` 组件的优势提升性能。

相关问题

vue3+ts项目使用keep-alive缓存组件实例，每个组件传递参数不同

在Vue3项目中，结合TypeScript (TS)，如果你想利用`keep-alive`特性来缓存页面并复用已经创建的组件实例，特别是在路由跳转时传递不同参数的情况下，你可以这样做：

1. 安装和配置KeepAlive：
首先，你需要安装Vue Router插件，它内置了对`<keep-alive>`的支持。在`main.ts`或其他合适的入口文件里，安装`vue-router`和`vue-router保活插件`，如`vue-router-preserve-query`。

   npm install @vue/router vue-router-preserve-query

2. 使用KeepAlive和动态路由守卫：
在你的`router/index.ts`或相应配置文件中，配置`<keep-alive>`包裹需要缓存的组件，并使用动态路由守卫（如`beforeRouteUpdate`）来处理参数变化。

   import { createRouter, createWebHistory } from 'vue-router';
   import preservedQuery from 'vue-router-preserve-query';

   // ...其他路由配置

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
     <--- 插入 keep-alive 和 preserveQuery -->
     scrollBehavior: () => ({ y: 0 }),
     plugins: [preservedQuery],
   });

   // ...路由守卫
   router.beforeEach((to, from, next) => {
     if (to.meta.preserve) { // 检查是否需要缓存
       router.app.$routeMeta.preserveQuery(to.query); // 存储当前查询参数
     }
     next();
   });
   
   router.afterEach((to, from) => {
     // 在每次切换路由后，检查之前存储的查询参数
     if (from.meta.preserveQuery) {
       to.query = from.meta.preserveQuery; // 设置新路由的目标参数
     }
   });

3. 组件内处理参数：
   在被缓存的组件中，你可以接收和处理从父路由传来的参数，通常在`setup()`或`created()`生命周期钩子中。

import { defineComponent, ref } from 'vue';

export default defineComponent({
setup(props) {
const queryParams = ref(props.query || {}); // 获取并管理来自父路由的参数

onMounted(() => {
// 在组件挂载时，可以根据参数做初始化
});

return {
queryParams
};
},
});

vue2 keep-alive缓存的组件，交互事件如何传递

`keep-alive` 是 Vue 内置的一个组件，可以在内部缓存动态组件，避免每次重新渲染。在使用 `keep-alive` 缓存组件时，交互事件是不会被触发的，因为组件并没有被销毁和重新创建。

如果需要在缓存组件中传递交互事件，可以通过以下两种方式：

1. 使用 Vuex 管理组件状态，并在交互事件中触发对应的 Vuex Action。这样即使组件被缓存，状态仍然存在，可以被读取和修改。

2. 在需要缓存的组件中使用 `activated` 和 `deactivated` 生命周期钩子函数。当组件被激活时（从缓存中取出并显示），触发 `activated` 钩子函数，在该函数中添加事件监听器；当组件被停用时（缓存到内存中），触发 `deactivated` 钩子函数，在该函数中移除事件监听器。这样可以在缓存组件中继续使用交互事件。

例如：

<template>
  <div>
    <button @click="count++">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  activated() {
    this.$el.addEventListener('mousemove', this.handleMouseMove);
  },
  deactivated() {
    this.$el.removeEventListener('mousemove', this.handleMouseMove);
  },
  methods: {
    handleMouseMove(event) {
      console.log(event.clientX, event.clientY);
    }
  }
};
</script>

注意：如果使用第二种方式，需要确保事件监听器正确添加和移除，避免出现重复添加或未移除的情况。