vue3watch的五种写法

Vue3中的`watch`函数可以有五种不同的写法，用于监听数据变化并执行相应的回调：

1. **简单模式** (基础用法)：

data() {
  return { count: 0 };
},
watch: {
  count(newVal, oldVal) {
    console.log('count changed from', oldVal, 'to', newVal);
  }
}

这里的`count`会被监视，当其值改变时会触发回调。

2. **深度监听**：

watch: {
  deepData: {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true,
  }
}

通过设置`deep: true`，可以监听嵌套对象的变更。

3. **立即运行式**：

mounted() {
  this.$watch('count', () => {
    console.log('count updated');
  }, { immediate: true });
}

`immediate: true`会让回调在初始渲染时立即执行一次。

4. **数组索引监听**：

watch: {
  arrayItems: {
    handler(index, value) {
      console.log('array item at index', index, 'has been updated to', value);
    },
    deep: true,
  }
}

对于数组元素的变化，可以指定处理特定索引的更新。

5. **异步监听**：

async watch: {
  asyncData: {
    handler(newValue) {
      await someAsyncFunction(newValue);
    },
    Immediate: true, // 如果希望首次立即执行
  }
}

`handler`可以返回一个Promise，用于异步处理。