vue3中的watch()的用法和具体作用

下面就为你详细讲解一下“vue3中的watch()的用法和具体作用”，具体内容如下：

watch()的介绍

watch()是Vue.js中一个非常重要的API，它可以用来观察数据的变化并做出相应的响应。在Vue 3中，watch()的具体用法与Vue 2相比有所变化，它更加简单、灵活和易于理解，让我们从下面的两个示例中来看看它的具体用法和作用。

示例1

假设我们有一个计算属性（computed）需要依赖于一个数据（data），当这个数据发生变化时，我们希望计算属性能够及时更新，此时我们可以使用watch()来实现，具体代码如下：

<template>
  <div>
    <p>{{ message }}</p>
    <p>我们一起学习Vue 3吧！</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    const message = watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log("count的值更新了：", newValue);
      }
    );

    return {
      message,
      state,
    };
  },
};
</script>

在上面的代码中，我们定义了一个状态对象state，其中包含一个名为count的属性。然后，我们使用watch()来监听count属性的变化，并且在它发生变化时，将新旧值输出到控制台中。所以，当我们点击按钮增加或减少计数器的值时，可以看到控制台中打印出相应的输出信息。

示例2

另外，watch()还可以接受一个选项对象，在选项对象中可以定义多个参数来对观察目标进行更细节的控制。比如我们可以使用deep来控制是否深度监听对象，使用immediate来控制是否在初始化时立即执行观察函数等。下面是一个使用选项对象的示例代码：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v-if="isShow">{{ message }}</div>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: {
        firstName: "张",
        lastName: "三",
      },
      isShow: true,
    });

    watch(
      () => state.name,
      (newValue, oldValue) => {
        console.log("name的值更新了：", newValue);
      },
      {
        deep: true,
        immediate: false,
      }
    );

    function toggle() {
      state.isShow = !state.isShow;
    }

    const message = "欢迎使用Vue 3！";

    return {
      state,
      toggle,
      message,
    };
  },
};
</script>

在上面的代码中，我们定义了一个状态对象state，其中包含一个名为name的属性，name属性是一个包含firstName和lastName的对象。我们使用watch()来监听name属性的变化，并且在它发生变化时，将新旧值输出到控制台中。在选项对象中，我们设置了deep: true表示要深度监听，及时被监听对象内部的变化。immediate: false表示在初始化时不执行观察函数，而是等到后续改变后再执行。

因此，在上面的代码中，每次我们改变了firstName或lastName的值时，都可以在控制台中看到相应的输出信息。