Vue模板中匿名函数与methods方法的性能差异对比（含Vue2/3）

Vue2 Options API 场景 #

两者存在明确的性能差异，核心区别在于函数实例的创建时机与复用性：

• methods中的方法在组件初始化阶段就绑定到实例上，整个组件生命周期内只会存在一个函数实例，不会随渲染重复创建。
• 模板内的匿名函数（如箭头函数）每次组件触发重渲染时都会生成一个全新的函数实例——哪怕只是子组件更新引发父组件重渲染，这个匿名函数都会被重新定义。

带来的实际影响：

• 若子组件依赖事件回调的引用做优化（比如使用v-memo或基于引用对比的props缓存），匿名函数的每次新引用会被Vue的diff算法判定为"属性变更"，导致子组件不必要的重渲染。
• 在列表循环等频繁渲染的场景中，大量重复创建匿名函数会累积额外的内存开销，增加垃圾回收的压力，复杂页面下可能出现性能感知差异。
• methods方法可在组件内多处复用，匿名函数则只能局限在当前模板位置，重复编写会增加代码冗余。

Vue3 场景 #

Vue3的模板编译做了针对性优化，但差异依然存在：

• 对于无依赖的简单转发逻辑（比如你示例中直接触发emit的箭头函数），Vue3的编译器会将其优化为静态函数，不会随渲染重复创建，此时性能表现和methods/setup中定义的函数一致。
• 但如果匿名函数涉及组件的响应式变量（比如(val) => $emit('input', val + this.count)），每次渲染仍会生成新的函数实例，和Vue2的情况完全一致。
• 若使用Composition API，在setup中定义的函数同样是初始化时创建一次，复用性和性能表现优于模板内的匿名函数（除非被编译优化的简单场景）。

总结 #

除非是Vue3中极端简单的无依赖回调场景（编译器可优化），否则优先选择在methods（Vue2）或setup（Vue3）中定义回调函数，避免匿名函数带来的不必要重渲染和内存开销。你示例中的两种写法，Vue2构建后代码差异明显；Vue3中简单转发场景可能编译为相同代码，但复杂场景仍有本质区别。

内容的提问来源于stack exchange，提问作者DMack