为什么Vue模板事件处理器中bind()函数的行为不一致？

差异原因 #

这个问题本质是Vue模板编译器对两种事件绑定表达式的处理逻辑不同导致的：
Vue在编译事件绑定的@click="xxx"表达式时，会根据表达式的类型走不同的生成逻辑：

• 如果表达式是静态可识别的函数类型表达式（比如函数字面量、明确返回函数的静态调用），编译器会直接把这个表达式的求值结果作为事件回调函数，事件触发时自动调用该函数。
• 如果表达式是动态调用表达式（调用的主体是组件实例的动态属性，比如methods里的方法、状态变量），编译器会把整个表达式包装到一个匿名函数的函数体中，事件触发时只会执行这个表达式本身，不会主动处理表达式的返回值。

现在对应到两个示例：

1. 第一个示例的(() => console.log('this gets logged')).bind()是静态的函数字面量调用bind方法，编译阶段就能确定表达式的返回值是函数，所以编译器直接把这个返回的函数作为点击事件的回调，点击时自动调用该函数，就会输出日志。
2. 第二个示例的myFunc.bind()是调用组件实例上myFunc方法的bind方法，myFunc是运行时才能确定值的动态属性，编译器无法确定它的返回值类型，所以把它当成普通的执行语句包装到匿名函数中。点击时只会执行myFunc.bind()这个调用本身，返回的绑定后新函数没有被主动调用，自然不会执行函数体内的日志输出逻辑。

如果要让第二个示例也能正常输出，只需要主动调用bind返回的新函数即可，写法改成@click="myFunc.bind()()"即可。

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