Vue3中的watchEffect怎么应用

在Vue3中，watchEffect是一个非常强大的工具，用于监听响应式数据的变化并执行相应的副作用。与watch不同，watchEffect不需要显式地指定要监听的数据源，它会自动追踪在回调函数中使用到的所有响应式数据，并在这些数据发生变化时重新执行回调函数。

基本用法

watchEffect的基本用法非常简单。你只需要传入一个回调函数，这个函数会在组件初始化时立即执行，并且在它所依赖的响应式数据发生变化时重新执行。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`Count is: ${count.value}`);
    });

    return {
      count
    };
  }
};

在这个例子中，watchEffect会监听count的变化，并在count的值发生变化时打印出当前的count值。

自动依赖追踪

watchEffect的一个强大之处在于它的自动依赖追踪。你不需要手动指定要监听的数据源，watchEffect会自动追踪在回调函数中使用到的所有响应式数据。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = ref(0);

    watchEffect(() => {
      doubleCount.value = count.value * 2;
    });

    return {
      count,
      doubleCount
    };
  }
};

在这个例子中，watchEffect会自动追踪count的变化，并在count变化时更新doubleCount的值。

停止监听

watchEffect返回一个停止监听的函数，你可以在需要时调用这个函数来停止监听。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const stop = watchEffect(() => {
      console.log(`Count is: ${count.value}`);
    });

    // 停止监听
    stop();

    return {
      count
    };
  }
};

在这个例子中，watchEffect会在count变化时打印出当前的count值，但在调用stop()后，watchEffect将不再监听count的变化。

副作用清理

watchEffect的回调函数可以返回一个清理函数，这个清理函数会在回调函数重新执行之前被调用，或者在watchEffect停止监听时被调用。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect((onCleanup) => {
      console.log(`Count is: ${count.value}`);

      onCleanup(() => {
        console.log('Cleanup');
      });
    });

    return {
      count
    };
  }
};

在这个例子中，每次count变化时，watchEffect会先执行清理函数，然后再执行回调函数。

总结

watchEffect是Vue3中一个非常实用的工具，它能够自动追踪响应式数据的变化并执行相应的副作用。通过watchEffect，你可以简化代码，减少手动管理依赖的复杂性。无论是简单的数据监听，还是复杂的副作用处理，watchEffect都能提供强大的支持。