vue3 watch handler

在Vue3中使用watch属性时，可以通过定义一个handler函数来监听数据的变化并执行相应的操作。handler函数接受两个参数，即新值和旧值。在给watch属性设置handler函数时，可以直接传入一个箭头函数，如下所示：

watch(msg, (newVal, oldVal) => {
console.log(newVal, oldVal);
});

这段代码表示当msg的值发生变化时，打印出新值和旧值。在Vue3中，watch属性可以监听单个数据，也可以同时监听多个数据。如果要监听多个数据，可以将这些数据写成一个数组，如下所示：

watch([msg, str], (newVal, oldVal) => {
console.log(newVal, oldVal);
});

此外，如果要监听对象中的某个对象，可以使用箭头函数来定义监听的对象路径，如下所示：

watch(() => obj.arr, (newVal, oldVal) => {
console.log(newVal, oldVal);
});

如果要同时监听多个数据和深层对象，可以将这些数据和箭头函数一起放入数组中，如下所示：

watch([msg, str, () => obj.arr], (newVal, oldVal) => {
console.log(newVal, oldVal);
});

另外，如果想要立即执行监听函数，可以使用watchEffect函数，如下所示：

watchEffect(() => {
console.log(msg.value);
});

这段代码表示立即执行监听函数并打印出msg的值。总之，在Vue3中可以通过设置handler函数来实现对数据变化的监听和相应操作。