前言

我们在使用 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.

    这里不能使用 beforeDestroy 和 destroyed ，因为 beforeDestroy 钩子在 Vue  组件实例即将销毁之前触发，而destroyed实例销毁之后触发。

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

三. 应用总结

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

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

2. 事件监听器的管理:

在 mounted 钩子中添加 resize 事件监听器。

在 activated 钩子中重新添加 resize 事件监听器，确保组件被激活时可以响应事件。

在 deactivated 钩子中移除 resize 事件监听器，避免组件停用时仍然响应事件。

在 beforeDestroy 钩子中移除 resize 事件监听器，确保组件销毁时不会留下无效的监听器。

3. 文章小结

通过正确管理 VueJS 组件的生命周期钩子，特别是在使用 <keep-alive> 时，我们可以确保只有当前激活的组件响应 resize 事件。这种方法不仅提高了应用的性能，还减少了不必要的事件处理。