vue3.5新功能之onEffectCleanup函数

新增onEffectCleanup函数

onEffectCleanup作用

onEffectCleanup 是一个用于处理副作用清理的函数，通常在组合式 API 中使用。当我们的一个组件在卸载之前或者在watchEffect回调执行之前会自动调用onEffectCleanup函数。有了这个函数我们就不需要在组件的beforeUnmount钩子里统一清理一些timer了，这样做起来业务更加清晰统一。

让我们一起来看一个示例：

<template>
  <div ref="element" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>

<script setup>
import { ref } from 'vue';
import { onEffectCleanup } from "@vue/reactivity";

const element = ref(null);
let animationFrameId;
let width = 0;
let height = 0;

const animate = () => {
  width += 1;
  height += 1;
  if (width >= 100 || height >= 100) {
    return;
  }
  animationFrameId = requestAnimationFrame(animate);
};

onMounted(() => {
  animationFrameId = requestAnimationFrame(animate);
});

onEffectCleanup(() => {
  cancelAnimationFrame(animationFrameId);
  console.log('Animation stopped');
});
</script>

在创建基于requestAnimationFrame的动画时，当组件被卸载时，需要取消动画帧以停止动画，释放浏览器资源。onEffectCleanup在这里起到了清理动画相关资源的作用。

应用场景

1. 定时器相关
   当在组件中创建了定时器（如setInterval或setTimeout）来周期性地执行某些操作时，onEffectCleanup可以确保在组件卸载或者效果不再需要时，定时器被正确清除。这样可以防止内存泄漏，因为如果不清理定时器，即使组件已经从 DOM 中移除，定时器仍然会继续运行并占用内存。

2. 事件监听
   如果在组件挂载时添加了对window或其他对象的事件监听（如window.addEventListener），在组件卸载时需要移除这些监听器。可以在onEffectCleanup中执行移除监听器的操作，保证不会有残留的事件监听器导致意外的行为。

3. 异步数据获取与取消
   在某些情况下，可能会有正在进行的异步数据获取操作（如使用fetch或者axios进行网络请求），当组件不再需要这些数据或者组件被卸载时，可以在onEffectCleanup中执行取消请求的相关操作（如果请求库支持的话），以避免不必要的资源消耗和可能出现的错误。

4. 动画相关
   如果在组件中启动了动画（例如使用requestAnimationFrame），在组件生命周期结束时，可以使用onEffectCleanup来停止动画，释放相关资源。

注意： onEffectCleanup函数目前没有在vue包中暴露出来，如果你想使用可以从@vue/reactivity包中导入onEffectCleanup函数。