面试题：Vue组件事件捕获与冒泡同时存在时的执行顺序及应用场景

Question

假设在一个多层嵌套的Vue组件结构中，既有事件捕获又有事件冒泡，描述它们的执行顺序。并且举例说明在实际开发中，什么样的业务场景会用到同时存在事件捕获和冒泡的情况，以及如何通过代码实现。

Answer 1

执行顺序

在多层嵌套的Vue组件结构中，事件捕获先发生，然后是事件冒泡。当一个事件触发时，它首先从最外层的祖先元素开始，向内层元素传递（捕获阶段），直到到达事件目标元素。然后，事件从事件目标元素开始，向外层元素传递（冒泡阶段）。

业务场景及代码实现

业务场景：例如在一个包含多个层级的菜单组件中，最外层是菜单容器，中间层是菜单项组，内层是具体菜单项。当点击一个菜单项时，可能希望最外层的菜单容器先捕获到点击事件，进行一些全局的操作（如记录点击次数用于统计），然后菜单项本身也能捕获到点击事件进行具体的业务逻辑处理（如展开子菜单），并且该点击事件还能冒泡到菜单项组，菜单项组根据情况执行一些逻辑（如关闭其他同组菜单项的展开状态）。

代码实现：

1. HTML 结构（Vue模板）

<template>
  <div id="menu-container" @click.capture="handleContainerClick">
    <div id="menu-group" @click="handleGroupClick">
      <div id="menu-item" @click="handleItemClick">Click me</div>
    </div>
  </div>
</template>

2. Vue 组件逻辑

export default {
  methods: {
    handleContainerClick() {
      console.log('Container click captured');
    },
    handleGroupClick() {
      console.log('Group click bubbled');
    },
    handleItemClick() {
      console.log('Item click');
    }
  }
}

在上述代码中，@click.capture 用于指定事件捕获，@click 默认是事件冒泡。当点击 menu-item 时，首先会触发 handleContainerClick（捕获阶段），然后触发 handleItemClick，最后触发 handleGroupClick（冒泡阶段）。