本文探讨 vue 中多次 $emit 的执行机制、参数传递的性能影响，以及如何在组件通信中平衡灵活性与效率，帮助开发者避免隐式开销并提升大规模应用的可维护性。
在 Vue 开发中，$emit 是父子组件解耦通信的核心机制。但当一个方法内触发多个 $emit，或频繁传递大型事件对象时，其行为和性能影响常被低估。理解底层逻辑，才能写出既健壮又高效的组件。
✅ $emit 不是 return：所有调用都会执行
关键误区在于认为“只监听其中一个事件，另一个就不会触发”。这是错误的。
$emit 是同步函数调用，只要代码执行到它，就会立即广播事件——无论父组件是否注册了对应监听器。例如：
methods: {
changeInput(event) {
this.$emit('changeInput', event); // ✅ 总是触发（即使父组件没监听）
this.$emit('changeInputValue', event.target.value); // ✅ 同样总是触发
}
}
这意味着：
- 即使父组件仅写 ，changeInputValue 事件仍会创建事件对象、遍历监听器列表、执行空回调（若无监听器）；
- 在高频操作（如输入防抖前的原始 input 事件）或大量组件实例场景下，这种“冗余 emit”会累积可观的 CPU 和内存开销。
⚠️ 注意：Vue 3 的 emits 选项虽能做类型校验，但不阻止未声明事件的 emit 执行——它仅在开发模式下警告，运行时照常广播。
? 传递完整对象 vs. 拆分值：性能差异微乎其微，但设计影响深远
关于 event 对象本身：JavaScript 中对象传递是引用传递（实际是“传值，值为引用”），因此 this.$emit(‘change’, event) 并不会深拷贝整个 Event 实例。其内存开销主要来自：
立即学习“前端免费学习笔记（深入）”；
