vue2 watch 异步

Vue 2中的`watch`选项允许你在数据变化时执行一些回调函数。当涉及到异步操作时，Vue默认不会等待你的异步操作完成再触发回调，因为这可能会导致性能问题。如果你需要在`watch`里执行异步操作，你可以这样做：

1. **立即执行**：可以使用`.immediate`标志，在初次设置值的时候就立即执行回调，无论是否还有其他异步依赖。

data() {
  return {
    value: 'initial'
  }
},
watch: {
  value(newVal) {
    this.handleAsync(newVal);
  },
  immediate: true
},
methods: {
  handleAsync(value) {
    setTimeout(() => {
      // 异步处理...
    }, 0);
  }
}

2. **同步更新**：在`async`模式下，`handleAsync`函数会被包裹在一个Promise中，确保整个`watch`回调是同步执行的。但要注意，这种方式会阻塞视图更新直到Promise解析。

watch: {
  value(newVal) {
    this.handleAsync(newVal).then(() => {
      // 视图会在这个.then之后更新
    });
  },
  handler: async function (newVal) {
    await this.handleAsync(newVal);
  }
},
methods: {
  handleAsync(value) {
    return new Promise((resolve) => {
      setTimeout(() => {
        // 异步处理...
        resolve();
      }, 0);
    });
  }
}