vue defineEmits 设置为同步执行

在 Vue 中，`defineEmits` 是 `setup` 函数中用于声明组件接受哪些自定义事件以及它们应该怎样被触发的一种方法。默认情况下，事件处理是异步的，这意味着在组件内部，当你发出一个事件时，Vue 会立即返回，而不会等待事件处理函数执行完毕。这是为了保证视图更新的流畅性，因为如果每个事件都可能导致一个长时间运行的操作，那可能会阻塞 UI。

如果你希望在某些场景下，让事件处理变为同步执行（也就是说在事件处理完成之前阻止其他代码执行），你可以通过修改事件处理函数的方式使其看起来像同步代码。然而，这不是 Vue 官方推荐的做法，因为它违背了 Vue 模式的初衷——非阻塞性UI更新。

一种可能的实现方式是在事件处理函数内部使用 `Promise` 或者 `async/await` 来包裹你的异步操作，并在操作完成后手动调用 `resolve` 或 `return`。例如：

import { on, off } from 'vue';

setup() {
  const syncEmit = (event, payload) => {
    on(this, event, function (args) {
      // 异步操作...
      setTimeout(() => {
        // 在操作完成后再移除监听器，确保不会多次触发
        off(this, event);
        args.length > 0 ? this.$emit(event, ...args) : this.$emit(event);
      }, 0); // 立即执行异步操作
    });
  };

  // 定义同步执行的事件处理
  defineEmits(['myEvent'], [syncEmit]);

  // 使用时：
  syncEmit('myEvent', { someData });

  return {}; // 返回空对象表示当前 setup 函数没有副作用
}

注意：这种方式并不保证真正的同步执行，只是模拟了效果，因为 Vue 的渲染过程仍然是异步的，只是延迟了一些异步操作。而且，同步处理事件可能会导致性能问题，因此通常只适用于特殊情况。