Difference in 'vue.js' and 'vue.min.js' with inline statement in event.

[olegvakulenko]

Version

2.5.16

Reproduction link

https://jsfiddle.net/e2oa3k75/

Steps to reproduce

1. Click on "Test"

What is expected?

https://jsfiddle.net/w5q3ytga/

I expect that 'vue.js' and 'vue.min.js' have same behavior, so I expect to see alert window.

What is actually happening?

https://jsfiddle.net/e2oa3k75/

When I use Development version, inline statement produce warning:

[Vue warn]: Property or method "alert" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[posva]

You should not use globals in templates, that's why we put the warning. You cannot rely on them always being accessible

[Justineo]

https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

In development builds (in this case vue.js) Vue will use the native Proxy to detect data/methods which are not defined on the component instance so the alert call will be intercepted. For production builds (in this case vue.min.js) the validation logic is removed so the alert call finally fallbacks to window.alert.

Because this validation requires a runtime check which relies on Proxy so we can't do it during compilation but if we keep the runtime check, we'll experience browser compatibility issues and it will kind of bloat the code size.

So I think it's better to just remember this caveat and avoid using global functions inside templates. Thanks.