本文探讨 vue 组件中多次调用 `$emit` 的性能影响及参数传递策略，明确指出：多个 `$emit` 均会同步执行并带来额外开销；而传递完整事件对象（如 `event`）相比仅传 `event.target.value`，内存与性能开销差异微乎其微，推荐统一传递高信息量对象以提升可维护性。
在 Vue 自定义组件开发中，$emit 是父子通信的核心机制，但其使用方式直接影响组件的性能表现与长期可维护性。许多开发者会出于“灵活性”考虑，在一个事件处理方法中触发多个不同名称的 $emit（例如同时派发 ‘changeInput’ 和 ‘changeInputValue’），或为满足不同父组件需求而拆分发射多个细粒度事件。然而，这种设计虽看似解耦，实则隐含性能与语义双重风险。
✅ 关键事实：$emit 不是 return，而是同步函数调用
每个 $emit 都会立即执行——它不会中断当前方法流程，也不会因监听器未注册而跳过。以下代码中，两行 $emit 必然全部执行，无论父组件是否监听了 ‘changeInputValue’：
methods: {
changeInput(event) {
this.$emit('changeInput', event); // 总是触发
this.$emit('changeInputValue', event.target.value); // 总是触发（即使无人监听）
}
}
这意味着：
- 每次事件触发都会遍历内部事件监听器数组（即使监听器为空）；
- 多余的 $emit 增加了 Vue 实例的事件系统负担；
- 当组件数量激增（如表格中渲染数百个输入框），冗余发射会累积成可观的 CPU 开销。
? 结论一：避免在一个方法中无条件发射多个事件。若父组件仅需值，就只 emit 一次；若需多种数据形态，应由父组件自行解析，而非子组件重复发射。
✅ 参数体积 ≠ 性能瓶颈：传递 event 比 event.target.value 更优
有人担忧：event 对象体积大，序列化/拷贝成本高。实际上，在 JavaScript 运行时中：
立即学习“前端免费学习笔记（深入）”；
