feat(runtime-dom): support event options

[CyberAP]

There's no support for event options right now, this pull request provides support for event listener options.

You can pass event handler and options as an object:

{
  handler: EventValue,
  options: EventListenerOptions
}

Example:

render() {
  return h('button', {
    onClick: {
      handler: () => { this.counter++ },
      options: {
        once: true
      }
    }
  });
}

I am sure there's something to improve on the TypeScript side, don't hesitate to suggest!

[yyx990803]

I don't have a clear idea on how to optimize this yet, but this is definitely too unoptimized - it will cause the event listener to be detached and re-attached on every single component update.

Also need to consider compiled case - for example with @click.cpature we know the options will never change so it should not need to go this route.

[CyberAP]

I don't have a clear idea on how to optimize this yet, but this is definitely too unoptimized - it will cause the event listener to be detached and re-attached on every single component update.

I thought about looseEqual check and thought it would add more overhead than event re-assignment.

Also need to consider compiled case - for example with @click.cpature we know the options will never change so it should not need to go this route.

Could this be a compiler flag?

nextValue = {
  handler: () => {},
  options: {},
  persistent: true
}

[CyberAP]

To my surprise looseEqual check is much faster than event re-assignment. So probably not that bad of a tradeoff.

https://jsperf.com/looseequal-or-event-re-assign/1

[yyx990803]

Yeah, as a rule of thumb, anything in pure JavaScript will be faster than code that touches the DOM.

[yyx990803]

I think the implementation looks good now. Would you be interested in adding tests for this module? I think we can directly test the patchEvent function (instance can just be null since it's only used for error handling and that will be tested in error handling integration tests)

[yyx990803]

👍 great work!

[vue-bot]

Hey @CyberAP, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚