Skip to content

Null event crashes when called #2605

@jods4

Description

@jods4

Version

3.0.2

Reproduction link

https://jsfiddle.net/7ntxygdp/

Steps to reproduce

Compiler optimization cacheHandlers changes the behavior of the linked fiddle.
Basically without the optimization you can bind null as an event handler and everything works fine (i.e. nothing happens when event is called).
If you compile with cacheHandlers, the following code is generated:
https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%3Cinput%20%40blur%3D%5C%22null%5C%22%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeImports%22%3Afalse%2C%22hoistStatic%22%3Atrue%2C%22cacheHandlers%22%3Atrue%2C%22scopeId%22%3Anull%2C%22ssrCssVars%22%3A%22%7B%20color%20%7D%22%2C%22bindingMetadata%22%3A%7B%22TestComponent%22%3A%22setup%22%2C%22foo%22%3A%22setup%22%2C%22bar%22%3A%22props%22%7D%2C%22optimizeBindings%22%3Afalse%7D%7D

It's very easy to see that it's calling null(...args) which of course fails at runtime.

What is expected?

Same behavior, no crash

What is actually happening?

Different behavior, crash when optimized.


You might ask: isn't it stupid binding null to an event?
It's pretty useful when you want to listen to an event sometimes, but not always, or when you're passing through (optional) handlers from outside code.
It can be done by using the @event="member" syntax, :onEvent="member" or easily inside a functional component.

The alternatives would be to coalesce a no-op () => {} function or don't bind the event at all, which are a lot less convenient than passing null.

In any case, the fact that non-optimized and optimized cases do not behave the same is bad.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions