vue3里写watch监听

在 Vue 3 中，`watch` 是一种响应式监听机制，它允许你在数据变化时执行自定义的函数，类似于观察（watches）某个数据源。Vue 提供了两种 `watch` 的用法：简单模式和对象模式。

1. **简单模式（深度监听）**:

   // 简单使用
   this.$watch('someData', (newVal, oldVal) => {
     console.log('data changed:', newVal, 'old value:', oldVal);
   });

这里 `someData` 是你想要监听的属性名，当这个属性的值发生变化时，会触发回调函数。

2. **对象模式（深度监听与选项）**:
更灵活的方式是作为对象返回，这样可以提供更精细的配置：

   // 对象模式
   const watchOptions = {
     target: 'someData', // 监听的目标
     handler: (newVal, oldVal) => {
       console.log('data updated:', newVal, 'previous value:', oldVal);
     },
     deep: true, // 是否深度监听，默认为 false
     immediate: true, // 是否立即执行一次，初始化时
   };
   this.$watch(watchOptions);

在这里，你可以设置深度监听（`deep`），立即执行（`immediate`）等选项。

**相关问题--:**
1. Vue 3 的 `watch` 可以监听哪些类型的变量？
2. 如何在 Vue 3 中取消 `watch` 监听？
3. `watch` 和 `computed` 在响应式更新上有什么区别？