vue3为什么移除了on

Vue3 移除了 on 事件修饰符主要是为了简化API并提高性能。

在 Vue2 中，我们可以使用 v-on 指令配合事件修饰符来监听事件。例如，我们可以这样使用：<button v-on:click.stop="handleClick">Click me</button>，其中的 .stop 就是事件修饰符，用于阻止事件冒泡。然而，这种方式会增加运行时的开销，尤其在大规模应用中，会导致性能下降。

因此，在 Vue3 中，为了提高性能并简化API，将事件修饰符移除了。取而代之的是，我们可以使用新的 EventListenerOptions 配置项来实现类似的功能。

例如，我们可以这样使用：<button @click.passive="handleClick">Click me</button>，其中的 .passive 就是事件监听器的配置项，用于设置事件监听器为被动模式，提高性能。

通过移除事件修饰符，Vue3 在运行时可以更高效地处理事件绑定和触发，减少了不必要的开销，从而提升了整体的性能表现。

需要注意的是，在大多数情况下，我们并不需要手动设置事件监听器的配置项，因为 Vue3 在默认情况下会根据事件类型自动设置合适的配置项。只有在特殊需要时，才需要手动设置配置项。

综上所述，Vue3 移除了 on 事件修饰符主要是为了简化API并提高性能，在常规使用情况下，我们可以使用新的 EventListenerOptions 配置项来实现类似的功能。

Vue3在设计上移除了 on 这个 API 的主要原因是为了统一和简化事件处理的方式。

1. 更好的类型推断和类型检查：Vue3使用了 TypeScript 进行开发，移除 on API 可以使得编译器更准确地推断类型，提高代码的可靠性和稳定性。

2. 单一事件处理函数：Vue3引入了 Composition API，它允许我们使用 setup 函数来定义组件的逻辑，而不再使用 mounted、created等钩子函数。在 setup 函数中，我们可以直接使用 JavaScript 的原生事件处理方式，即使用 addEventListener 来绑定事件，这样我们就能够以一种更一致和简洁的方式处理所有的事件。

3. 更好的性能和组件分离：移除 on API 可以减少 Vue3 的运行时代码量，进而提高性能。此外，Vue3 采用了更加模块化的设计，通过将组件的核心逻辑与事件处理逻辑分离，使得组件的开发更加清晰，并且能够更好地进行单元测试和代码维护。

4. 更大的灵活性和可扩展性：Vue3鼓励开发者使用原生的 JavaScript 语法和API来处理事件，这使得我们可以更加灵活地使用第三方库或自定义解决方案来实现特定的事件处理需求。

5. 更好的开发体验：移除 on API 可以使得开发者更容易理解和使用 Vue3，因为它与现有的 JavaScript 和浏览器的事件处理方式更加一致。这可以减少学习成本，并提高开发效率。

在Vue 3中，重新设计了许多部分，包括移除了on事件绑定。这样做的原因是为了简化API并提高框架性能。

1. 背景
   在Vue 2中，处理事件（如点击事件、鼠标事件等）的方式是使用v-on指令或@符号来绑定事件，并指定一个方法作为事件处理程序。这种方式需要在HTML模版中声明事件绑定，增加了模版的复杂性。

2. 使用Composition API
   Vue 3引入了Composition API，通过一个新的函数式编程风格的API来替代Vue 2中的Options API。Composition API使得组件逻辑可以更好地组织和重用，并且更容易进行代码拆分和测试。

3. 创建自定义事件
   在Vue 3中，可以使用 provide/inject 或 ref/emit 组合来创建自定义事件。这样，我们可以通过在组件之间传递数据并触发自定义事件来实现相同的效果。

4. 使用setup函数
   在Vue 3中，组件的逻辑被放在了一个名为setup的函数中。在这个函数中，可以使用Composition API来创建响应式的数据、计算属性、自定义指令等。在setup函数中，可以创建自定义事件并将其暴露给模版使用。

5. 使用v-on指令
   尽管Vue 3已经移除了v-on指令，但是在模版中仍然可以使用@符号来绑定自定义事件。通过调用emit方法，可以触发自定义事件并传递参数。示例代码如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const handleClick = () => {
      emit('customEvent', 'Hello, world!');
    };

    return {
      handleClick,
    };
  },
};
</script>

在组件中，setup函数会返回一个对象，其中包含了所有需要在模版中访问的属性和方法。通过在模版中使用@click来触发handleClick方法，就可以发送自定义事件。

总结：
Vue 3移除on事件绑定是为了简化API并提高框架性能。通过使用Composition API和setup函数，可以轻松地创建自定义事件并进行事件处理。虽然v-on指令被移除了，但@符号仍可以用于绑定自定义事件，并通过emit方法来触发。