Vue 3 watchEffect：如何用 onInvalidate 优化副作用处理

news2024/11/24 19:36:12

在 Vue3 中，watchEffect 是一个用于在响应式数据变化时自动重新执行的函数。它在创建响应式副作用时特别有用，比如在某些数据变化时更新 DOM、发起网络请求或处理复杂的逻辑。

watchEffect 的 onInvalidate 是一个非常重要的功能，用于处理副作用函数，理解它可以帮助我们在复杂的应用中更好地管理资源，避免内存泄漏和不必要的副作用执行。

1. watchEffect 基本使用

watchEffect 用于自动追踪其内部副作用函数中的响应式数据，当这些数据发生变化时，副作用函数会重新执行。

举个 🌰

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

2. onInvalidate 基本使用

onInvalidate 是一个参数，用于处理副作用的取消或清理操作。当在副作用函数中使用了某些资源（如定时器、订阅等），可能需要在副作用函数重新执行之前清理这些资源，以防止内存泄漏或其他问题。

举个 🌰

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="count++">增加计数</button>
  </div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watchEffect((onInvalidate) => {
      console.log('副作用函数执行');
      const timer = setInterval(() => {
        console.log(`计时器中 count 的值: ${count.value}`);
      }, 1000);
      onInvalidate(() => {
        console.log('清除计时器');
        clearInterval(timer);
      });
    });
    return {
      count,
    };
  },
};
</script>

按道理而言：使用 onInvalidate 清理计时器，每次 count 变化时，watchEffect 会重新执行，在此之前 onInvalidate 会先清理掉之前的计时器，避免重复创建计时器导致内存泄漏。

当我们点击按钮改变 count 值时，watchEffect 重新执行，每秒打印出值，但是 onInvalidate 失效，console.log 没有输出“清楚计时器”，大家可以先分析一下为什么哦？

原因：

watchEffect 的 onInvalidate 在依赖项发生变化时会被触发，关键在于依赖的正确追踪。而上面代码中，count 的变化没有触发 onInvalidate，是因为 watchEffect 没有正确追踪到 count 的依赖。

watchEffect 只能追踪在副作用函数内部使用的响应式数据。如果在 watchEffect 没有直接使用 count.value ，那么它的变化就不会触发副作用函数重新执行，从而不会调用 onInvalidate 清理之前的计时器。

虽然在 setInterval 的回调函数中使用了 count.value，但这并不足以让 watchEffect 追踪到 count 的变化。watchEffect 只会在它同步执行的那一刻，追踪它直接访问的响应式数据。如果响应式数据只是在异步回调（如 setInterval）中访问，它将不会触发 watchEffect 的重新执行。

解决方案：

在 watchEffect 的主逻辑中，直接访问 count.value 即可。

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="count++">增加计数</button>
  </div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watchEffect((onInvalidate) => {
      // 在函数内直接读取 count.value，确保它被追踪，这一步很重要！！！
      console.log(`副作用函数执行，count 值为: ${count.value}`);
      const timer = setInterval(() => {
        console.log(`计时器中 count 的值: ${count.value}`);
      }, 1000);
      onInvalidate(() => {
        console.log('清除计时器 timer');
        clearInterval(timer);
      });
    });
    return {
      count,
    };
  },
};
</script>

此时控制台输出的结果就是我们预期的！

3. 引入原因

1、清理副作用

在副作用函数中使用 onInvalidate 可以确保在副作用函数重新执行之前，之前的副作用会被正确清理。这样可以避免资源泄漏，例如未清除的定时器或未取消的事件监听器。

2、处理异步操作

对于异步操作（如 API 请求），onInvalidate 可以用于取消未完成的请求。例如，在某个数据变化时，取消之前发出的请求。

3、避免性能问题

在副作用函数中进行清理操作可以避免重复的资源消耗，提升应用性能。例如，在组件卸载时清理定时器或订阅可以避免不必要的计算和内存使用。

4. 注意事项

1、副作用函数的重用

onInvalidate 只在副作用函数重新执行之前调用。如果副作用函数的逻辑是复用的，确保清理操作不会在副作用函数的每次执行中重复触发。

2、异步操作的取消

对于异步操作，确保在 onInvalidate 中正确地取消操作。如果使用 fetch 或其他异步 API，考虑使用 AbortController 进行取消。

3、不必要的清理

避免在 onInvalidate 中做过多的清理操作，确保只处理真正需要的清理逻辑。

举个 🌰

假设有一个网络请求场景，每当数据变化时都会重新发起网络请求，但如果请求未完成时数据再次变化，则会取消之前的请求。在这里，我们只希望 onInvalidate 在新的请求发起之前调用，而不是每次请求逻辑执行时都重复触发清理操作。

<template>
  <div>
    <p>当前ID: {{ id }}</p>
    <button @click="id++">增加 ID</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const id = ref(1);
    const result = ref('');
    watchEffect((onInvalidate) => {
      console.log(`发起新的请求，ID 为: ${id.value}`);
      // 模拟一个网络请求
      const controller = new AbortController();
      fetch(`https://xxx.xxx.com/posts/${id.value}`, { signal: controller.signal })
        .then((response) => response.json())
        .then((data) => {
          console.log('请求成功:', data);
          result.value = data.title;
        })
        .catch((error) => {
          if (error.name === 'AbortError') {
            console.log('请求被取消');
          } else {
            console.error('请求失败:', error);
          }
        });
      // 只在发起新请求之前，取消前一次的请求
      onInvalidate(() => {
        console.log('清理函数执行，取消之前的请求');
        controller.abort();
      });
    });
    return {
      id,
      result,
    };
  },
};
</script>

初次加载时：