vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）

在Vue中，通常不直接使用原生的jQuery方式来处理事件，因为Vue提供了更为强大和灵活的事件处理机制。在Vue中，事件的冒泡、捕获和委托通常是通过组合式API中的setup函数里的onMounted钩子函数来处理的。

例如，如果你想要在Vue中监听一个元素的点击事件，并且阻止它冒泡，你可以这样做：

<template>
  <div @click="divClicked">
    <button @click.stop="buttonClicked">Click me</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    const divClicked = () => {
      console.log('Div clicked');
    };
 
    const buttonClicked = (event) => {
      // 使用 .stop 修饰符阻止事件冒泡
      event.stopPropagation();
      console.log('Button clicked');
    };
 
    return {
      divClicked,
      buttonClicked
    };
  }
};
</script>

在这个例子中，@click.stop 是一个修饰符，它会阻止点击事件冒泡。

对于事件捕获，Vue中并没有直接的事件捕获机制，但你可以通过监听window级别的事件来模拟事件捕获。

对于事件委托，即使用一个事件处理程序来处理多个事件，在Vue中你可以这样做：

<template>
  <div>
    <button v-for="n in 10" :key="n" @click="buttonClicked">Button {{ n }}</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    const buttonClicked = (event) => {
      // 事件委托：通过事件的target来判断是哪个按钮被点击
      console.log(event.target.textContent);
    };
 
    return {
      buttonClicked
    };
  }
};
</script>

在这个例子中，我们只为外层的div添加了一个点击事件处理程序，它会委托给所有的按钮。这样，我们就可以只用一个函数来处理多个按钮的点击事件，而不是为每个按钮单独设置事件处理函数。