vue3中watch语法

在Vue 3中，watch仍然是一个用于观察和响应Vue实例上的数据变化的选项。watch选项接受一个对象，该对象中的属性对应要观察的数据属性，并指定对应的回调函数，用于处理数据变化时的逻辑。

watch选项的语法如下：

watch: {  
  // 观察data中的a属性  
  a: {  
    immediate: true, // 立即执行回调函数  
    handler(newVal, oldVal) {  
      // 回调函数逻辑  
    },  
    deep: true // 深度观察嵌套属性变化  
  }  
}

在watch对象中，每个属性表示一个要观察的数据属性，可以指定immediate和handler属性。

• immediate：默认为false。如果设置为true，则当组件创建时立即执行回调函数。
• handler：指定处理函数，当对应的数据属性发生变化时触发该函数。回调函数的参数为新的值和旧的值。
• deep：默认为false。如果设置为true，则表示深度观察嵌套属性变化。当数据属性的值发生变化时，会递归地触发回调函数。

以下是一个示例，演示了如何使用watch来观察和响应数据变化：

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
    const increment = () => {  
      count.value++;  
    };  
    watch(count, (newVal, oldVal) => {  
      console.log(`count changed from ${oldVal} to ${newVal}`);  
    });  
    return { count, increment };  
  }  
};

在上面的示例中，我们使用ref创建了一个名为count的响应式引用，并使用watch观察了它的变化。当count的值发生变化时，回调函数会被触发，并在控制台输出变化前后的值。