Vue中能否在methods属性内返回函数作为事件处理器使用？

Vue 完全支持从 methods 中返回函数作为事件处理器使用，你给出的示例写法是合法可运行的，框架从来没有“事件绑定处只能使用箭头函数”的强制限制。

写法原理 #

模板中@事件名="表达式"的绑定逻辑，会在模板渲染绑定事件阶段对后面的表达式求值，只要最终求值结果是可调用的函数，就会被作为事件触发时执行的处理器。
你写的闭包返回形式执行逻辑如下：

1. 初次渲染v-for列表、给每个组件绑定事件时，会立刻执行someMethodWrapper(data)，把当前循环项的data作为参数传入
2. 方法执行后返回的箭头函数，才是真正绑定到someEvent上的监听器
3. 当组件触发someEvent时，会把事件携带的参数（也就是你代码里的someotherData）传给这个返回的闭包函数执行

注意：因为外层包裹函数会在渲染阶段执行，不要在包裹函数里写有副作用、或者耗时很长的逻辑，这类逻辑应该放到返回的内层函数里，等事件触发时再执行。

你贴的代码里有两个需要注意的小问题：

• 返回函数的形参写的是someotherData，函数体内使用的是someOtherData，大小写不一致会触发引用错误
• 如果是Vue2环境，setNewProperty如果没有提前在data中声明，直接赋值不会触发响应式更新，需要用this.$set处理；Vue3环境不存在这个问题，直接赋值即可

常见事件绑定写法差异 #

事件绑定不存在唯一的“正确写法”，只要符合求值规则都可以正常运行，常见写法的差异如下：

• 直接绑定方法名：比如@someEvent="someMethod"，这种写法不会在渲染阶段执行方法，会直接把方法本身作为监听器，事件触发时只会收到事件本身携带的参数，拿不到v-for循环的上下文参数，适合不需要额外传参的场景
• 内联箭头函数：比如@someEvent="(payload) => doSomething(data, payload)"，和你写的methods返回闭包的写法运行效果完全等价，区别只是逻辑写在模板还是抽离到methods里，前者适合简单逻辑，后者适合逻辑需要复用的场景
• methods返回闭包写法（也就是你示例中的写法）：本质是利用闭包缓存了当前循环项的上下文参数，不会出现参数串值的问题，this指向也因为外层methods方法已经被绑定到组件实例、返回值用了箭头函数，完全指向当前组件实例，不会出现指向错乱的问题。

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