Version

3.1.5

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudn....

Steps to reproduce

Open Developer Tools, click on each button and see what gets shown for this.

What is expected?

Execution of an event handler should have a consistent context handling for this. As seen with Vue 2.

What is actually happening?

If we execute a custom event by using $emit, the context behaves different than just using events like @click.

I think we could generate the same code for custom and native events:

onClick: _cache[0] || (_cache[0] = (...args) => ($data.foo.trigger && $data.foo.trigger(...args)))

The reason we don't cache them on components is because some components may expect to check the passed in function's length (arity). See https://github.com/vuejs/vue-next/commit/87c2a1e50f5317a0c47051b06f419e60e5644a1a

Not sure if it's possible to cache and retain arity at the same time.

Ah i see! Then maybe, if there is a place where documenting this makes sense, it could be added there.