Vue3 watch VS watchEffect

Vue3 watch

使用 Vue 3 的watch函数，我们可以创建一个示例来展示其功能，包括如何监听响应式引用、如何利用它的精细控制能力、以及如何处理新旧值。在这个例子中，我们将构建一个简单的组件，它包含一个可以修改的文本输入框，以及一个watch函数来监听这个输入框的变化，并在控制台中打印出新旧值。

<template>
  <div>
    <input v-model="textInput" placeholder="Type something..." />
  </div>
</template>

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

export default {
  setup() {
    // 定义一个响应式引用
    const textInput = ref("");

    // 使用watch来监听textInput的变化
    watch(
      textInput,
      (newValue, oldValue) => {
        console.log(`Old value: ${oldValue}, New value: ${newValue}`);
      },
      {
        immediate: false, // 这里设置为false（默认值），表示watch回调不会在初始化时立即执行
      }
    );

    return {
      textInput,
    };
  },
};
</script>

在上述代码中，我们通过以下步骤使用了watch：

1. 监听响应式引用：我们创建了一个响应式引用textInput，并用v-model绑定到一个输入框上，以便我们可以监听并响应用户的输入。

2. 精细控制：通过watch函数，我们指定了要监听的具体数据源textInput。这表示watch将只对textInput的变化做出响应，展现了watch在数据监听方面的精细控制能力。

3. 延迟执行：在这个例子中，我们没有设置immediate: true，所以watch回调函数不会在组件初始化时立即执行。这意味着只有当textInput的值发生变化时，回调函数才会被调用。

4. 旧值与新值：watch的回调函数接收到的两个参数分别是新值newValue和旧值oldValue。这使得我们可以轻松比较数据变化前后的状态，从而进行一些相应的操作或逻辑处理。

这个例子清楚地展示了 Vue 3 中watch的使用方法和特点，特别是在需要对特定数据变化进行精细监听和控制时的能力。

Vue3 watchEffect

让我们通过 Vue 3 中使用watchEffect的代码示例来进一步说明其特性。在这个例子中，我们将创建一个组件，它包含两个响应式数据源：count和multiplier。我们将使用watchEffect来监听这两个数据源的任何变化，并计算它们的乘积。此外，我们也将展示如何使用watchEffect来执行一些初始化操作，以及如何处理副作用的清理。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Multiplier: {{ multiplier }}</p>
    <p>Product: {{ product }}</p>
    <button @click="incrementCount">Increment Count</button>
    <button @click="incrementMultiplier">Increment Multiplier</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(1);
    const multiplier = ref(2);
    const product = ref(0);

    // 使用watchEffect自动追踪响应式状态的变化
    watchEffect(() => {
      product.value = count.value * multiplier.value;
      console.log(
        `The product of ${count.value} and ${multiplier.value} is ${product.value}`
      );
    });

    // 两个方法，分别用于修改count和multiplier的值
    const incrementCount = () => {
      count.value++;
    };

    const incrementMultiplier = () => {
      multiplier.value++;
    };

    // 返回响应式数据和方法，以便在模板中使用
    return {
      count,
      multiplier,
      product,
      incrementCount,
      incrementMultiplier,
    };
  },
};
</script>

在这个例子中，watchEffect做了以下几件事情：

1. 立即执行：一旦组件被创建，watchEffect内的回调函数会立即执行一次。这确保了即使在用户进行任何交互之前，product的值已经根据count和multiplier的初始值计算出来了。

2. 自动依赖收集：watchEffect自动追踪了回调函数中所有的响应式引用（在本例中为count和multiplier）作为依赖。这意味着，当count或multiplier的值发生变化时，回调函数将自动重新执行。

3. 无旧值与新值：与watch不同，watchEffect的回调函数不接收旧值和新值作为参数。它仅关注依赖的整体变化，并在变化时重新执行。

这个示例展示了watchEffect的核心特性，包括如何利用它进行自动依赖收集和处理响应式状态变化，以及它在组件初始化时如何自动执行。