vue.js - vue2中自定义事件执行是异步的吗，怎么个流程？

Question

vue的自定义事件完成后才执行下面的console.log吗，还是怎么执行

请告知！

Answer 1

this.$emit 在 Vue 中是作为同步函数执行的。当你在 Vue 组件中调用 this.$emit() 方法时，它会立即触发已注册的事件处理器，而不是等待其他操作完成。这意味着任何紧随 this.$emit() 调用之后的代码都会在 $emit 完成触发事件之前执行。

这一点可以从 Vue 的源码中得到确认。在 Vue 的源码中，$emit 方法的实现显示了它是如何同步地遍历并调用所有注册到特定事件上的回调函数的。具体来说，当 this.$emit(event) 被调用时，Vue 会查找当前组件实例 (vm) 上注册的所有该事件的回调函数（如果存在），然后依次调用它们。这个过程是同步的，即在开始调用下一行代码之前，所有的事件回调都已经被执行完毕。

这是一个简化的示例，说明了 this.$emit 如何工作：

Vue.prototype.$emit = function (event, ...args) {
    const vm = this;
    let cbs = vm._events[event];
    if (cbs) {
        cbs.forEach(cb => cb.apply(vm, args));
    }
    return vm;
};

Answer 2

在 Vue 2 中，自定义事件（也称为组件事件）的执行并不直接决定为同步还是异步，但它们的处理通常与 JavaScript 的事件循环和 Vue 的更新队列（nextTick）相关。

当你在 Vue 组件中触发一个自定义事件（通过 $emit 方法）时，这个事件会立即在当前组件的上下文中被触发，并且会按照父组件监听这个事件的顺序进行执行。这些事件处理器（即监听器）在 Vue 的内部是同步执行的，但它们可能触发异步操作，如 AJAX 请求或 setTimeout。

然而，如果你指的是事件处理器中的异步代码（如 Promise、setTimeout 或其他异步操作），那么这些代码的执行是异步的，并且不会影响自定义事件的同步触发。

关于你的截图和 console.log 的问题，如果 console.log 是在触发自定义事件的同一同步代码块之后执行的，那么 console.log 会在所有同步的事件处理器之后执行，但在任何异步代码之前。

这里有一个简化的例子来解释这个概念：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent() {
      console.log('Inside handleCustomEvent');
      // 假设这里有一些异步操作
      setTimeout(() => {
        console.log('Inside async part of handleCustomEvent');
      }, 0);
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('Inside nextTick after mount');
    });
    // 触发自定义事件
    this.$refs.childComponent.$emit('custom-event');
    console.log('After emitting custom event');
  }
};
</script>

在这个例子中，控制台的输出顺序将是：

1. "Inside handleCustomEvent"（同步事件处理器）
2. "After emitting custom event"（$emit 后面的同步代码）
3. "Inside nextTick after mount"（Vue 的 $nextTick 回调，确保 DOM 更新后执行）
4. "Inside async part of handleCustomEvent"（假设的异步操作）

注意，$nextTick 是 Vue 提供的一个方法，用于延迟执行一个回调到下次 DOM 更新循环之后。这可以用来确保在 DOM 更新后执行某些操作。