watch 函数是如何监视响应式数据的变化，并执行相应的逻辑？

watch函数是Vue中用于监视响应式数据变化的函数，并在数据发生变化时执行相应的逻辑或副作用。它可以监视响应式数据的变化，包括对象的属性、数组的变动、嵌套对象和数组等。

watch函数的使用方式有两种：基于回调函数的watch和基于侦听器的watch。

1. 基于回调函数的watch：

   import { watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count的值从${oldValue}变为${newValue}`);
   });

    

   在上述示例中，通过watch函数监视count的变化。每当count的值发生变化时，回调函数就会被触发，传入当前值newValue和上一次的值oldValue。在回调函数中，可以执行相应的逻辑或副作用。

2. 基于侦听器的watch：

   import { watch } from 'vue';
   
   const obj = reactive({
     name: 'Tom',
     age: 18,
   });
   
   watch(() => obj.age, (newValue, oldValue) => {
     console.log(`age的值从${oldValue}变为${newValue}`);
   });

    

   在上述示例中，通过watch函数监视obj.age的变化。这里的侦听器是一个响应式getter函数，只有当obj.age的值发生变化时，回调函数才会被触发。

除了基于回调函数和侦听器的方式，watch函数还提供了一些其他选项来控制监视行为，例如immediate 选项用于立即执行回调函数一次。

总之，watch函数可以用于监视响应式数据的变化，并在数据发生变化时执行相应的逻辑或副作用。