为什么Vue组件事件内联处理函数中引用console会提示未定义？

这个问题和箭头函数的上下文绑定机制没有关系，本质是Vue模板的表达式解析规则导致的：

• Vue编译模板中的事件绑定、插值表达式时，会默认把表达式内的所有标识符，优先从当前组件实例的作用域中查找对应值——也就是只会在组件的data、methods、computed、props等挂载在实例上的属性里找，不会自动透传浏览器全局对象（window）上的原生属性。
• 哪怕你写的是完整的Window.console形式，Window本身也是一个需要被解析的标识符，Vue同样会优先在组件实例上查找叫Window的属性，你没有在组件上定义这个属性，自然会触发和裸写console完全一致的报错。

可以做个快速验证：把绑定改成不带箭头函数的内联写法 <my-component @my-message="console.log('hello')" />，依然会触发完全相同的报错——问题根源根本不在函数写法，在模板对标识符的解析逻辑上。

• 最符合Vue设计规范的方案：把事件触发的逻辑抽到组件的methods选项中定义为独立方法，模板中只做方法引用绑定，不要在内联绑定里塞复杂逻辑。比如定义一个handleMyEvent方法，方法内部正常调用console打印内容，再把绑定改成@my-message="handleMyEvent"，就能正常运行，不会触发解析错误。
• 如果确实需要在模板的内联表达式中使用全局API（比如console、Math、window这类原生全局对象），可以把这些全局对象显式暴露到组件实例的可访问作用域中：单组件需要用的话，直接在data中暴露对应属性即可；全局所有组件都需要用到的话，可以在应用初始化时通过全局配置把需要的全局对象挂载到所有组件的实例原型上，模板编译时就能正常找到对应标识符，不会抛出未定义的错误。

这套严格的模板解析规则是Vue刻意做的设计，目的是把模板表达式的作用域限制在组件实例范围内，避免模板中出现不可控的全局引用，降低逻辑耦合，并不是框架的缺陷。

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