vue3 watch清除副作用

在Vue3中，可以使用watchEffect和watchPostEffect来触发副作用函数。watchEffect函数接受一个回调函数作为第一个参数，并返回一个清除函数。在回调函数内部，可以通过调用onInvalidate函数来执行清除副作用的操作。 watchPostEffect函数和watchEffect函数类似，但它会在Vue更新后立即执行，而不是在下次更新时执行。 这些函数都可用于监听变量的变化，并在变化发生时执行相应的操作。

相关问题

vue3 watch 中的清理负作用

### Vue3 中 `watch` 的清理副作用机制

在 Vue 3 中，`watch` 提供了一个强大的方式来响应数据变化并执行相应的逻辑。为了确保应用程序的高效运行，在某些情况下需要清理不再必要的副作用。这可以通过传递给回调函数的第三个参数中的 `immediate` 或者通过返回一个清除函数实现。

当定义带有清理需求的监视器时，可以在回调函数内部返回一个函数作为清理操作[^3]：

import { ref, watch } from 'vue';

const source = ref(0);
let cleanupFunction;

// 定义具有清理功能的 watcher
watch(
  () => source.value,
  (newValue, oldValue, onInvalidate) => {
    // 注册清理逻辑
    onInvalidate(() => {
      if (cleanupFunction) {
        cleanupFunction();
      }
    });

    // 模拟发起网络请求或其他异步操作
    cleanupFunction = someAsyncOperation(newValue);

    console.log(`Source changed to ${newValue} from ${oldValue}`);
  },
  { immediate: true }
);

在这个例子中，每当被观察的数据发生变化时，都会先调用上一次注册的清理函数（如果有），然后再执行新的业务逻辑。这种模式特别适用于处理像定时器、事件监听器以及未完成的 AJAX 请求这样的场景，可以有效防止内存泄漏和其他潜在问题的发生[^2]。

对于更复杂的案例，比如取消尚未完成的 HTTP 调用，可以利用 Axios 库提供的 cancel token 功能配合 `onInvalidate` 来达到目的[^1]:

import axios from 'axios';
import { ref, watchEffect } from 'vue';

function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  let cancel;

  watchEffect(async () => {
    try {
      // 取消之前的请求
      if (cancel) cancel();

      // 创建一个新的取消令牌
      const CancelToken = axios.CancelToken;
      cancel = function() {};

      const response = await axios.get(url, {
        cancelToken: new CancelToken(c => (cancel = c)),
      });
      
      data.value = response.data;
    } catch (err) {
      if (!axios.isCancel(err)) {
        error.value = err.message || "An unknown error occurred.";
      }
    }
  });

  return { data, error };
}

上述代码展示了如何在一个组件卸载前安全地中止任何正在等待的结果，从而避免不必要的更新或错误报告[^5]。

vue3watch和watcheffect使用

在Vue 3中，`watch` 和 `watchEffect` 都是用来监听数据变化并执行某些操作的工具，它们的区别在于：

1. **watch**：
- `watch` 是一种基础的响应式监听器，它可以监听一个或多个属性，并在其值发生变化时执行回调函数。它的返回值可以是一个函数用于取消观察，或者直接是一个表达式（它会被计算并在每次依赖变更时更新）。
- 示例：

     watch(obj, (newVal) => {
       console.log('obj updated:', newVal);
     }, { immediate: true }); // 可以立即执行一次

2. **watchEffect**：
- `watchEffect` 是从 Composition API 引入的，它是副作用管理的一部分，主要用于异步操作如网络请求、定时器等，提供更好的控制性和性能优化。`watchEffect` 在组件卸载时会自动清除，无需手动取消，因此它通常配合 `reactive` 或 `ref` 使用。
- 示例：

     import { ref, watchEffect } from 'vue';

     const user = ref(null);

     watchEffect(async () => {
       if (user.value) {
         await fetchUser(user.value.id);
       }
     });