vue3watch和watcheffect区别

// 使用 watch 和 watchEffect 的示例代码

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch, watchEffect } from 'vue';

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

    // 使用 watch 监听特定的响应式数据变化
    watch(count, (newVal, oldVal) => {
      console.log(`watch: count changed from ${oldVal} to ${newVal}`);
    });

    // 使用 watchEffect 立即执行并监听所有依赖的变化
    watchEffect(() => {
      console.log(`watchEffect: count is ${count.value}`);
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

解释说明：

1. watch:

   • watch 用于监听特定的响应式数据（如 ref 或 reactive 对象）的变化。
   • 它会在初始渲染时不立即执行，只有当被监听的数据发生变化时才会触发回调函数。
   • 回调函数接收两个参数：新的值和旧的值。

2. watchEffect:

   • watchEffect 会立即执行传入的函数，并自动追踪其中用到的所有响应式依赖。
   • 每当这些依赖发生变化时，watchEffect 会重新执行该函数。
   • 它不需要显式指定要监听的数据，而是自动收集依赖。

通过上述代码和解释，你可以更好地理解 watch 和 watchEffect 在 Vue 3 中的区别。