一：定义

在vue3项目中，清理副作用主要是指在一个响应式侦听器中，当状态重新执行或者组件销毁时，移除或者停止之前创建的资源，以避免内存泄漏、性能问题或者意外的行为

二：场景

1：使用定时器时，（setInterval 或 setTimeout）

watchEffect((onInvalidate) => {
  const timer = setInterval(() => {
    // 执行一些逻辑
  }, 1000);

  // 清理函数
  onInvalidate(() => {
    clearInterval(timer);
  });
});

2：订阅外部或者异步资源时，（WebSocket ）

watchEffect((onInvalidate) => {
  const ws = new WebSocket("ws://example.com/feed");

  ws.onmessage = (message) => {
    // 处理消息
  };

  // 侦听器清理函数
  onInvalidate(() => {
    ws.close();
  });
});

3：响应式引用发生变化时，（ref 或 reactive）

const user = ref(null);

watchEffect((onInvalidate) => {
  // 假设 fetchUser 返回一个取消订阅或清理资源的函数
  const unsubscribe = fetchUser(user.value, (newUser) => {
    user.value = newUser;
  });

  onInvalidate(() => {
    unsubscribe();
  });
});

三：总结

1：清理副作用主要是防止不必要的资源占用和潜在的内存泄漏。

2：Vue 提供的 onInvalidate 回调允许在侦听器重新运行之前或组件销毁时执行清理逻辑，确保应用资源被适当管理和释放。

3：有助于维护应用的性能和稳定性，还能防止潜在的内存泄露问题，使得应用更加健壮和可靠。