vue3 watch watcheffect

// 使用 Vue 3 的 watch 和 watchEffect

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

// 示例：使用 watch 监听单个响应式数据的变化
export function useWatchExample() {
  const count = ref(0);

  // 使用 watch 监听 count 的变化
  watch(count, (newVal, oldVal) => {
    console.log(`count changed from ${oldVal} to ${newVal}`);
  });

  return { count };
}

// 示例：使用 watchEffect 自动追踪依赖并执行副作用
export function useWatchEffectExample() {
  const count = ref(0);
  const doubleCount = ref(0);

  // 使用 watchEffect 自动追踪 count 的变化，并更新 doubleCount
  watchEffect(() => {
    doubleCount.value = count.value * 2;
    console.log(`doubleCount is now ${doubleCount.value}`);
  });

  return { count, doubleCount };
}

解释说明：

1. watch:

   • watch 用于显式地监听某个响应式数据的变化。
   • 在上面的代码中，我们监听了 count 的变化，每当 count 发生变化时，回调函数会被触发，并且可以获取到新旧值。

2. watchEffect:

   • watchEffect 会立即执行传入的函数，并自动追踪其中的响应式依赖。
   • 在上面的代码中，watchEffect 会自动追踪 count 的变化，并在每次 count 变化时重新执行回调函数，更新 doubleCount 的值。
   • watchEffect 不需要手动指定要监听的变量，它会自动检测并追踪所有在回调函数中使用的响应式变量。