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.

It seems like there has no non-null assetions when compiling v-on directive.

I create a PR to assert if expression is a function by wraping it into a IIFE when the expression is a Instance member, but i think it's not a recommendable way, so you can just ignore the PR above.