在 VueJS 中使用 Keep-Alive 处理窗口调整事件（在使用keep-alive缓存组件时，处理多个vue页面的resize事件）

news2024/11/15 17:46:34

前言

我们在使用 VueJS 开发复杂的单页应用程序时，我们经常需要管理组件的生命周期事件，以确保它们在特定的条件下正常工作。例如，当窗口大小调整时，我们可能需要重新绘制某些组件。这里我们详细介绍一下，如何在使用 keep-alive 包裹的组件中正确管理 resize 事件监听器。简单记录一下

一. 基本概念

1. 场景介绍

在 VueJS 中，组件的生命周期钩子允许我们在组件的特定阶段执行代码。常见的生命周期钩子包括 mounted、beforeDestroy 等。然而，当我们使用 keep-alive 包裹组件时，这些组件不会真正被销毁和重新创建，而是被缓存和重新激活。这就引入了两个新的生命周期钩子：activated 和 deactivated。

这里看下组件实例全部的生命周期函数，官方提供了（3个大类）共11个：

1. 创建阶段的四个：
> beforeCreate：实例创建之前。
> created：实例创建之后。
> beforeMount：组件挂载之前。
> mounted：                组件挂载之后。

2. 运行阶段的两个：
> beforeUpdate：数据改变，视图更新之前。
> updated：试图更新之后。销毁阶段的两个：
> beforeDestroy：       实例销毁之前。
> destroyed：              实例销毁之后。

3. 其它三个：
> activated 被 keep-alive 缓存的组件激活时调用。
> deactivated                            被 keep-alive 缓存的组件停用时调用。
> errorCaptured 2.5.0+ 新增当捕获一个来自子孙组件的错误时被调用

2. 具体场景

假设我们有多个组件需要在窗口大小调整时重新绘制。为了避免每个组件都监听 resize 事件，我们需要确保只有当前激活的组件响应该事件。这就需要我们在组件激活时添加事件监听器，在组件停用时移除监听器。以下是实现这一功能的详细步骤和代码示例。

二. 代码结构

1. 父组件结构

这里我们有一个父组件，它使用 <keep-alive> 包裹了多个子组件。

<template>
  <div class="anomalous_index">
    <transition name="" mode="" appear>
      <keep-alive>
        <anomal_1 v-if="twoContent === '异常1' && oneNavStatus === '异常事件'"/>
        <anomal_2 v-if="twoContent === '异常2' && oneNavStatus === '异常事件'"/>
        <anomal_3 v-if="twoContent === '异常3' && oneNavStatus === '异常事件'"/>
        <!-- 其他组件类似 -->
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      twoContent: '',
      oneNavStatus: ''
    };
  }
};
</script>

2. 子组件结构

以 anomal_1 组件为例，我们在其中管理 resize 事件监听器。

<template>
  <div>
    <!-- 异常1的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储 handleResize 事件处理程序的引用
      handleResize: null
    };
  },
  mounted() {
    // 在组件挂载时定义 handleResize 函数
    this.handleResize = this.$debounce(() => {
      console.log("anomal_1 resize event");
      this.initCanvas();
      this.getImage();
    }, 2000);
    // 添加 resize 事件监听器
    window.addEventListener("resize", this.handleResize);
  },
  activated() {
    // 在组件激活时重新添加 resize 事件监听器
    window.addEventListener("resize", this.handleResize);
  },
  deactivated() {
    // 在组件停用时移除 resize 事件监听器
    window.removeEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 在组件销毁前移除 resize 事件监听器
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    initCanvas() {
      // 初始化画布的函数
    },
    getImage() {
      // 获取图片的函数
    }
  }
};
</script>

这里不能使用 beforeDestroy 和 destroyed ，因为 beforeDestroy 钩子在 Vue 组件实例即将销毁之前触发，而destroyed实例销毁之后触发。
当使用 keep-alive 包裹组件时，组件在切换时并不会真正销毁，而是会被缓存，因此beforeDestroy 钩子不会触发。这时可以使用 activated 和 deactivated 生命周期钩子来管理组件的事件监听器。

三. 应用总结

1. 事件处理程序的定义:

我们在 mounted 钩子中定义 handleResize 函数。this.$debounce 用于防抖处理，以减少频繁调用。

防抖应用，请看：

防抖函数的实际应用https://blog.csdn.net/weixin_65793170/article/details/137824500?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172242376316800182136521%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=172242376316800182136521&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-137824500-null-null.nonecase&utm_term=%E9%98%B2%E6%8A%96&spm=1018.2226.3001.4450

2. 事件监听器的管理:

在 mounted 钩子中添加 resize 事件监听器。
在 activated 钩子中重新添加 resize 事件监听器，确保组件被激活时可以响应事件。
在 deactivated 钩子中移除 resize 事件监听器，避免组件停用时仍然响应事件。
在 beforeDestroy 钩子中移除 resize 事件监听器，确保组件销毁时不会留下无效的监听器。